2008-10-21 26 views
14

Tôi có một hộp đầu vào HTMLCách lấy giá trị mới của đầu vào HTML sau khi nhấn phím đã sửa đổi nó?

<input type="text" id="foo" value="bar"> 

Tôi đã gắn một handler cho 'KeyUp' sự kiện, nhưng nếu tôi lấy giá trị hiện tại của hộp đầu vào trong quá trình xử lý sự kiện, tôi nhận được giá trị như nó đã được, và không phải vì nó sẽ được!

Tôi đã thử chọn các sự kiện 'nhấn phím' và 'thay đổi', cùng một sự cố.

Tôi chắc chắn điều này rất đơn giản để giải quyết, nhưng hiện tại tôi nghĩ giải pháp duy nhất là để tôi sử dụng thời gian chờ ngắn để kích hoạt một số mã một vài phần nghìn giây trong tương lai!

Có cách nào để lấy giá trị hiện tại trong các sự kiện đó không?

EDIT: có vẻ như tôi gặp sự cố bộ nhớ cache với tệp js của mình khi tôi kiểm tra cùng một mã sau và nó hoạt động tốt. Tôi sẽ xóa câu hỏi, nhưng không chắc chắn liệu điều đó có mất đại diện cho loại người dân đã đăng ý tưởng hay không :)

Trả lời

19

Bạn có thể đăng mã của mình không? Tôi không tìm thấy bất kỳ vấn đề với điều này. Thử nghiệm trên Firefox 3.01/safari 3.1.2 với:

function showMe(e) { 
// i am spammy! 
    alert(e.value); 
} 
.... 
<input type="text" id="foo" value="bar" onkeyup="showMe(this)" /> 
+1

Tôi đã về nhà, đã kiểm tra mã của mình không được lật đổ và hoạt động tốt. Tôi nghĩ rằng tôi phải có một vấn đề bộ nhớ đệm với các tập tin js và nó đã bị mắc kẹt trên xử lý bấm phím thay vì keyup. Đánh giá cao nỗ lực trong việc viết mã mẫu để đánh dấu điều này là câu trả lời :) –

0

Here là bảng các sự kiện khác nhau và mức hỗ trợ trình duyệt. Bạn cần phải chọn một sự kiện được hỗ trợ trên ít nhất tất cả các trình duyệt hiện đại.

Như bạn sẽ thấy từ bảng, sự kiện keypresschange không có hỗ trợ thống nhất trong khi sự kiện keyup thực hiện.

Ngoài ra hãy chắc chắn rằng bạn đính kèm xử lý sự kiện bằng cách sử dụng phương pháp qua trình duyệt tương thích ...

3
<html> 
    <head> 
     <script> 
     function callme(field) { 
      alert("field:" + field.value); 
     } 
     </script> 
    </head> 
    <body> 
     <form name="f1"> 
      <input type="text" onkeyup="callme(this);" name="text1"> 
     </form> 
    </body> 
</html> 

Dường như bạn có thể sử dụng onkeyup để có được những giá trị mới của điều khiển đầu vào HTML . Hy vọng nó giúp.

1

Bạn có thể thử mã này (yêu cầu jQuery):

<html> 
<head> 
    <script type="text/javascript" src="jquery.js"></script> 
    <script type="text/javascript"> 
     $(document).ready(function() { 
      $('#foo').keyup(function(e) { 
       var v = $('#foo').val(); 
       $('#debug').val(v); 
      }) 
     }); 
    </script> 
</head> 
<body> 
    <form> 
     <input type="text" id="foo" value="bar"><br> 
     <textarea id="debug"></textarea> 
    </form> 
</body> 
</html> 
6

Có hai loại giá trị đầu vào: lĩnh vực của tài sản và lĩnh vực của html thuộc tính.

Nếu bạn sử dụng sự kiện keyup và field.value bạn shuld nhận giá trị hiện tại của trường. Nó không phải là trường hợp khi bạn sử dụng field.getAttribute ('value') mà sẽ trả về những gì trong thuộc tính html (value = ""). Thuộc tính thể hiện những gì đã được nhập vào trường và thay đổi khi bạn nhập, trong khi thuộc tính không thay đổi tự động (bạn có thể thay đổi nó bằng cách sử dụng phương thức field.setAttribute).

3

Để cung cấp một cách tiếp cận hiện đại cho câu hỏi này. Điều này hoạt động tốt, bao gồm Ctrl + v. GlobalEventHandlers.oninput.

var onChange = function(evt) { 
    console.info(this.value); 
    // or 
    console.info(evt.target.value); 
}; 
var input = document.getElementById('some-id'); 
input.addEventListener('input', onChange, false); 
Các vấn đề liên quan