sự kiện trao đổi html <input type = “text” /> không hoạt động

Tôi đang cố gắng làm một số thử nghiệm. Điều tôi muốn xảy ra là mỗi khi người dùng nhập một thứ gì đó vào hộp văn bản, nó sẽ được hiển thị trong một hộp thoại. Tôi đã sử dụng thuộc tính onchangesự kiện để làm cho nó xảy ra nhưng nó không hoạt động. Tôi vẫn cần nhấn nút gửi để làm cho nó hoạt động. Tôi đã đọc về AJAX và tôi đang suy nghĩ để tìm hiểu về điều này. Tôi vẫn cần AJAX để làm cho nó hoạt động hay là JavaScript đủ đơn giản? Xin vui lòng giúp đỡ.

index.php

<script type="text/javascript" src="javascript.js"> </script>

<form action="index.php" method="get">
 Integer 1: <input type="text" id="num1" name="num1" onchange="checkInput('num1');" /> <br />
 Integer 2: <input type="text" id="num2" name="num2" onchange="checkInput('num2');" /> <br />
 <input type="submit" value="Compute" />
</form>

javascript.js

function checkInput(textbox) {
 var textInput = document.getElementById(textbox).value;

 alert(textInput); 
}

onchangechỉ được kích hoạt khi điều khiển bị mờ. Hãy thử onkeypressthay thế.

Sử dụng .on('input'...để theo dõi mọi thay đổi đối với đầu vào (dán, gõ phím, v.v.) từ jQuery 1.7 trở lên.

Đối với đầu vào tĩnh và động:

$(document).on('input', '.my-class', function(){
    alert('Input changed');
});

Chỉ dành cho đầu vào tĩnh:

$('.my-class').on('input', function(){
    alert('Input changed');
});

JSFiddle với ví dụ tĩnh / động: https://jsfiddle.net/op0zqrgy/7/

Kiểm tra tổ hợp phím chỉ là giải pháp một phần, vì có thể thay đổi nội dung của trường nhập bằng cách nhấp chuột. Nếu bạn nhấp chuột phải vào trường văn bản, bạn sẽ có các tùy chọn cắt và dán mà bạn có thể sử dụng để thay đổi giá trị mà không cần gõ phím. Tương tự như vậy, nếu tính năng tự động điền được bật thì bạn có thể nhấp chuột trái vào một trường và nhận được danh sách thả xuống của văn bản đã nhập trước đó và bạn có thể chọn trong số các lựa chọn của mình bằng cách nhấp chuột. Tính năng bẫy phím sẽ không phát hiện được một trong hai loại thay đổi này.

Đáng buồn là không có sự kiện "onchange" nào báo cáo các thay đổi ngay lập tức, ít nhất là theo như tôi biết. Nhưng có một giải pháp phù hợp với mọi trường hợp: thiết lập sự kiện định thời bằng cách sử dụng setInterval ().

Giả sử trường nhập của bạn có id và tên là "thành phố":

<input type="text" name="city" id="city" />

Có một biến toàn cục có tên "city":

var city = "";

Thêm cái này vào phần khởi tạo trang của bạn:

setInterval(lookForCityChange, 100);

Sau đó, xác định một hàm lookForCityChange ():

function lookForCityChange()
{
    var newCity = document.getElementById("city").value;
    if (newCity != city) {
        city = newCity;
        doSomething(city);     // do whatever you need to do
    }
}

Trong ví dụ này, giá trị của "thành phố" được kiểm tra cứ sau 100 mili giây, bạn có thể điều chỉnh giá trị này theo nhu cầu của mình. Nếu bạn thích, hãy sử dụng một hàm ẩn danh thay vì xác định lookForCityChange (). Lưu ý rằng mã của bạn hoặc thậm chí trình duyệt có thể cung cấp giá trị ban đầu cho trường đầu vào để bạn có thể được thông báo về "thay đổi" trước khi người dùng thực hiện bất kỳ điều gì; điều chỉnh mã của bạn nếu cần.

Nếu ý tưởng về một sự kiện thời gian xảy ra mỗi phần mười giây có vẻ vô duyên, bạn có thể khởi tạo bộ hẹn giờ khi trường đầu vào nhận được tiêu điểm và kết thúc nó (với clearInterval ()) khi bị mờ. Tôi không nghĩ rằng có thể thay đổi giá trị của trường đầu vào mà nó không nhận tiêu điểm, vì vậy việc bật và tắt bộ hẹn giờ theo cách này sẽ an toàn.

HTML5 xác định một oninputsự kiện để bắt tất cả các thay đổi trực tiếp. nó hoạt động cho tôi.

onchange chỉ xảy ra khi người dùng cam kết thay đổi đối với phần tử đầu vào, hầu hết trường hợp này là khi phần tử mất tiêu điểm.

nếu bạn muốn hàm của mình kích hoạt mỗi khi giá trị phần tử thay đổi, bạn nên sử dụng oninputsự kiện - điều này tốt hơn so với sự kiện phím lên / xuống vì giá trị có thể được thay đổi bằng chuột của người dùng tức là được dán vào hoặc tự động điền, v.v.

Đọc thêm về sự kiện thay đổi tại đây

Đọc thêm về sự kiện đầu vào tại đây

sử dụng các sự kiện sau thay vì "onchange"

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

Thứ nhất, điều gì 'không hoạt động'? Bạn không thấy cảnh báo?

Ngoài ra, mã của bạn có thể được đơn giản hóa thành

<input type="text" id="num1" name="num1" onkeydown="checkInput(this);" /> <br />

function checkInput(obj) {
    alert(obj.value); 
}

Tôi gặp sự cố trong đó Safari không kích hoạt các sự kiện "onchange" trên trường nhập văn bản. Tôi đã sử dụng sự kiện "thay đổi" jQuery 1.7.2 và nó cũng không hoạt động. Tôi đã sử dụng sự kiện trao đổi văn bản của ZURB. Nó hoạt động với mouseevents và có thể kích hoạt mà không cần rời khỏi trường:
http://www.zurb.com/playground/jquery-text-change-custom-event

$('.inputClassToBind').bind('textchange', function (event, previousText) {
    alert($(this).attr('id'));
});

Một số nhận xét rằng IMO rất quan trọng:

• các phần tử đầu vào không phát ra sự kiện 'thay đổi' cho đến khi người dùng thực hiện hành động ENTER hoặc làm mờ đang chờ đợi là hành vi chính xác .

• Sự kiện bạn muốn sử dụng là "input"(" oninput "). Đây là minh chứng rõ ràng về sự khác biệt giữa hai: https://javascript.info/events-change-input

• Hai sự kiện báo hiệu hai cử chỉ / khoảnh khắc khác nhau của người dùng (sự kiện "đầu vào" có nghĩa là người dùng đang viết hoặc điều hướng một tùy chọn danh sách đã chọn, nhưng vẫn không xác nhận thay đổi. "Thay đổi" có nghĩa là người dùng đã thay đổi giá trị (với dấu enter hoặc làm mờ của chúng tôi)

• Lắng nghe các sự kiện chính như nhiều sự kiện được khuyến nghị ở đây là một cách thực hành không tốt trong trường hợp này. (như mọi người sửa đổi hành vi mặc định của ENTER trên đầu vào) ...

• jQuery không liên quan gì đến điều này. Đây là tất cả trong tiêu chuẩn HTML.

• Nếu bạn gặp khó khăn trong việc hiểu TẠI SAO đây là hành vi chính xác, có lẽ hữu ích, như thử nghiệm, hãy sử dụng trình chỉnh sửa văn bản hoặc trình duyệt của bạn mà không cần chuột / pad, chỉ cần bàn phím.

Theo quan điểm của tôi.

onkeyup đã làm việc cho tôi. onkeypress không kích hoạt khi nhấn lại khoảng trắng.

Nó là tốt hơn để sử dụng onchange(event)với <select>. Với <input>bạn có thể sử dụng sự kiện dưới đây:

- onkeyup(event)
- onkeydown(event)
- onkeypress(event)

thử onpropertychange. nó chỉ hoạt động cho IE.