Cách tốt nhất để theo dõi onchange khi bạn nhập vào loại đầu vào = văn bản có nghĩa là văn bản?

Theo kinh nghiệm của tôi, input type="text" onchangesự kiện thường chỉ xảy ra sau khi bạn rời khỏi ( blur) điều khiển.

Có cách nào để buộc trình duyệt kích hoạt onchangemỗi khi textfieldthay đổi nội dung không? Nếu không, cách thanh lịch nhất để theo dõi thủ công này là gì?

Sử dụng onkey*các sự kiện không đáng tin cậy, vì bạn có thể nhấp chuột phải vào trường và chọn Dán và điều này sẽ thay đổi trường mà không cần nhập bất kỳ bàn phím nào.

Là setTimeoutcách duy nhất? .. Xấu xí :-)

Cập nhật:

Xem câu trả lời khác (2015).

Câu trả lời gốc năm 2009:

Vì vậy, bạn muốn onchangesự kiện này phát sáng khi nhấn phím, làm mờ và dán? Đó là phép thuật.

Nếu bạn muốn theo dõi các thay đổi khi họ gõ, hãy sử dụng "onkeydown". Nếu bạn cần bẫy các thao tác dán bằng chuột, hãy sử dụng "onpaste"( IE , FF3 ) và "oninput"( FF, Opera, Chrome, Safari ¹ ).

¹ _{bị hỏng <textarea>trên Safari. Sử dụng textInputthay thế}

Những ngày này nghe cho oninput. Cảm giác như onchangekhông cần mất tập trung vào yếu tố. Nó là HTML5.

Nó được hỗ trợ bởi tất cả mọi người (ngay cả điện thoại di động), ngoại trừ IE8 trở xuống. Đối với IE thêm onpropertychange. Tôi sử dụng nó như thế này:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

Mã dưới đây hoạt động tốt với tôi với Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript / JQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Javascript là không thể đoán trước và hài hước ở đây.

• onchange chỉ xảy ra khi bạn làm mờ hộp văn bản
• onkeyup& onkeypresskhông luôn xảy ra khi thay đổi văn bản
• onkeydown xảy ra khi thay đổi văn bản (nhưng không thể theo dõi cắt và dán bằng nhấp chuột)
• onpaste& oncutxảy ra với phím nhấn và thậm chí với chuột phải.

Vì vậy, để theo dõi sự thay đổi trong textbox, chúng ta cần onkeydown, oncutvà onpaste. Trong cuộc gọi lại của các sự kiện này, nếu bạn kiểm tra giá trị của hộp văn bản thì bạn không nhận được giá trị cập nhật vì giá trị được thay đổi sau khi gọi lại. Vì vậy, giải pháp cho vấn đề này là thiết lập chức năng thời gian chờ với thời gian chờ là 50 mili giây (hoặc có thể ít hơn) để theo dõi sự thay đổi.

Đây là một hack bẩn nhưng đây là cách duy nhất, như tôi đã nghiên cứu.

Đây là một ví dụ. http://jsfiddle.net/2BfGC/12/

onkeyupxảy ra sau khi bạn gõ ví dụ tôi nhấn tkhi tôi nhấc ngón tay thì hành động xảy ra nhưng trên keydownhành động xảy ra trước khi tôi số hóa ký tựt

Hy vọng điều này là hữu ích cho một ai đó.

Vì vậy, onkeyuptốt hơn khi bạn muốn gửi những gì bạn vừa gõ bây giờ.

Tôi đã có một yêu cầu tương tự (trường văn bản phong cách twitter). Được sử dụng onkeyupvà onchange. onchangethực sự chăm sóc các hoạt động dán chuột trong khi mất tập trung từ trường.

[Cập nhật] Trong HTML5 trở lên, sử dụng oninputđể nhận các cập nhật sửa đổi ký tự theo thời gian thực, như được giải thích trong các câu trả lời khác ở trên.

Tôi nghĩ năm 2018 tốt hơn nên sử dụng inputsự kiện này.

-

Như Thông số WHATWG mô tả ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

Được kích hoạt tại các điều khiển khi người dùng thay đổi giá trị (xem thêm sự kiện thay đổi )

-

Đây là một ví dụ về cách sử dụng nó:

<input type="text" oninput="handleValueChange()">

Nếu bạn sử dụng CHỈ Internet Explorer, bạn có thể sử dụng điều này:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

Mong rằng sẽ giúp.

có một giải pháp khá gần (không sửa tất cả các cách Dán) nhưng hầu hết trong số chúng:

Nó hoạt động cho đầu vào cũng như cho textareas:

<input type="text" ... >
<textarea ... >...</textarea>

Làm như thế này:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

Như tôi đã nói, không phải tất cả các cách để Dán một sự kiện trên tất cả các trình duyệt ... tệ nhất là một số không thực hiện bất kỳ sự kiện nào, nhưng Timers thật kinh khủng khi được sử dụng cho việc đó.

Nhưng hầu hết các cách Dán được thực hiện bằng bàn phím và / hoặc chuột, do đó, thông thường một onkeyup hoặc onmouseup được kích hoạt sau khi dán, cũng onkeyup được kích hoạt khi gõ trên bàn phím.

Đảm bảo mã kiểm tra không mất nhiều thời gian ... nếu không, người dùng sẽ bị phạt kém.

Đúng vậy, mẹo là bắn vào phím và chuột ... nhưng hãy cẩn thận cả hai có thể bị bắn, vì vậy hãy ghi nhớ như vậy !!!

Xin vui lòng, đánh giá cách tiếp cận tiếp theo bằng JQuery:

HTML:

<input type="text" id="inputId" />

Javascript (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});

"đầu vào" làm việc cho tôi.

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

Bạn có thể sử dụng keydown, keyupvà keypresscác sự kiện là tốt.

Để theo dõi từng thử ví dụ này và trước đó giảm hoàn toàn tốc độ nhấp nháy con trỏ xuống không.

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: sự kiện tạo ra khi thoát

onchange: sự kiện tạo ra khi thoát nếu có bất kỳ thay đổi nào được thực hiện trong inputtext

onkeydown: sự kiện tạo ra trên bất kỳ lần nhấn phím nào (đối với việc giữ phím cũng lâu)

onkeyup: sự kiện tạo ra trên bất kỳ bản phát hành khóa nào

onkeypress: giống như onkeydown (hoặc onkeyup) nhưng sẽ không phản ứng với ctrl, backsace, alt khác

2018 ở đây, đây là những gì tôi làm:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

Nếu bạn có thể chỉ ra sai sót trong phương pháp này, tôi sẽ rất biết ơn.

Phương pháp 1: Thêm người nghe sự kiện cho input:

element.addEventListener("input", myFunction);

Phương pháp 2: Xác định thuộc oninputtính bằng JavaScript:

element.oninput = function()
{
    myFunction();
};

Phương pháp 3: Xác định thuộc oninputtính bằng HTML:

<input type="text" oninput="myFunction();">

Robert Siemer addEventListener không được hỗ trợ trong IE8.

"Các phiên bản IE cũ hơn đã hỗ trợ phương thức EventTarget.attachEvent () tương đương, độc quyền." https://developer.mozilla.org/it/docs/Web/API/Euity/addEventListener