Best way to track onchange as-you-type in input type=“text”?

后端未结

关注

 16  1134

天命终不由人

In my experience, input type=\"text\" onchange event usually occurs only after you leave (blur) the control.

Is there a way to

相关标签:

16条回答

醉梦人生

2020-11-22 08:55

I had a similar requirement (twitter style text field). Used onkeyup and onchange. onchange actually takes care of mouse paste operations during lost focus from the field.

[Update] In HTML5 or later, use oninput to get real time character modification updates, as explained in other answers above.

0 讨论(0)
发布评论:

提交评论
- 加载中...
耶瑟儿～

2020-11-22 08:55
To track each try this example and before that completely reduce cursor blink rate to zero.
```
<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 : event generates on exit

onchange : event generates on exit if any changes made in inputtext

onkeydown: event generates on any key press (for key holding long times also)

onkeyup : event generates on any key release

onkeypress: same as onkeydown (or onkeyup) but won't react for ctrl,backsace,alt other
0 讨论(0)
发布评论:

提交评论
- 加载中...
忘掉有多难

2020-11-22 08:58
Javascript is unpredictable and funny here.
- onchange occurs only when you blur the textbox
- onkeyup & onkeypress doesn't always occur on text change
- onkeydown occurs on text change (but cannot track cut & paste with mouse click)
- onpaste & oncut occurs with keypress and even with the mouse right click.
So, to track the change in textbox, we need onkeydown, oncut and onpaste. In the callback of these event, if you check the value of the textbox then you don't get the updated value as the value is changed after the callback. So a solution for this is to set a timeout function with a timeout of 50 mili-seconds (or may be less) to track the change.

This is a dirty hack but this is the only way, as I researched.

Here is an example. http://jsfiddle.net/2BfGC/12/
0 讨论(0)
发布评论:

提交评论
- 加载中...

暗喜

2020-11-22 08:59

These days listen for oninput. It feels like onchange without the need to lose focus on the element. It is HTML5.

It’s supported by everyone (even mobile), except IE8 and below. For IE add onpropertychange. I use it like this:

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>

0 讨论(0)

天命终不由人

2020-11-22 08:59

Robert Siemer addEventListener is not supported in IE8 .

"Older versions of IE supported an equivalent, proprietary EventTarget.attachEvent() method." https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

0 讨论(0)
发布评论:

提交评论
- 加载中...

囚心锁ツ

2020-11-22 09:01

Please, judge next approach using 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
});

0 讨论(0)