跟踪输入类型=“文本”中键入的onchange的最佳方法?

2020/09/26 20:41 · javascript ·  · 0评论

根据我的经验,input type="text" onchange事件通常仅在您离开(blur)控件后才会发生

有没有一种方法可以强制浏览器在onchange每次textfield内容更改时触发如果没有,“手动”跟踪此问题的最优雅方法是什么?

使用onkey*事件并不可靠,因为您可以右键单击该字段并选择“粘贴”,这将更改该字段而无需任何键盘输入。

setTimeout唯一的方法吗?..丑陋的:-)

更新:

参见另一个答案(2015)。


2009年原始答案:

因此,您希望onchange事件在击键,模糊粘贴时触发吗?太神奇了。

如果您想跟踪键入的更改,请使用"onkeydown"如果需要用鼠标捕获粘贴操作,请使用"onpaste"IEFF3)和"oninput"FF,Opera,Chrome,Safari 1)。

1 断为<textarea>在Safari。使用textInput替代

这些天来听听oninput 感觉就像onchange无需失去对元素的关注。是HTML5。

除IE8及以下版本之外,所有人(甚至移动设备)都支持它。对于IE添加onpropertychange我这样使用它:

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>

下面的代码对我使用Jquery 1.8.3很好

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

Javascript / JQuery:

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

这里的Javascript难以预测且有趣。

  • onchange 仅当您模糊文本框时才会发生
  • onkeyuponkeypress并非总是在文本更改时发生
  • onkeydown 在文本更改时发生(但无法通过单击鼠标来跟踪剪切和粘贴)
  • onpasteoncut会通过按键甚至鼠标右键单击发生。

因此,跟踪文本框中的变化,我们需要onkeydownoncutonpaste在这些事件的回调中,如果您检查文本框的值,那么您将无法获取更新的值,因为回调后该值会发生更改。因此,解决方案是将超时功能设置为50毫秒(或更短)的超时时间来跟踪更改。

正如我研究的那样,这是一个肮脏的技巧,但这是唯一的方法。

这是一个例子。
http://jsfiddle.net/2BfGC/12/

onkeyup例如在您键入t手指时按下时,动作会发生,但是keydown在我输入字符之前动作就发生t

希望这对某人有帮助。

因此onkeyup,当您想要发送您刚才输入的内容时,它会更好。

我有类似的要求(推特样式文本字段)。二手onkeyuponchangeonchange实际上会在失去焦点时照顾鼠标粘贴操作。

[更新]在HTML5或更高版本中,用于oninput获取实时字符修改更新,如上面其他答案所述。

我认为在2018年使用该input活动会更好

--

如WHATWG规范所述(https://html.spec.whatwg.org/multipage/indices.html#event-input-input):

当用户更改值时在控件上触发(另请参见change事件

--

这是一个使用方法的例子:

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

如果仅使用Internet Explorer,则可以使用以下命令:

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

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

希望能有所帮助。

有一个非常接近的解决方案(不解决所有粘贴方式),但是其中大多数:

它适用于输入以及文本区域:

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

这样做:

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

就像我说的那样,并不是所有方法都可以在所有浏览器上触发事件……最糟糕的是某些方法根本不会触发任何事件,但是使用计时器非常可怕。

但是大多数“粘贴”方式都是使用键盘和/或鼠标完成的,因此通常在粘贴后会触发onkeyup或onmouseup,在键盘上键入时也会触发onkeyup。

确保您的检查代码不会花费太多时间...否则用户的印象不佳。

是的,诀窍是在键和鼠标上射击...但是要注意,两者都可以被射击,所以请记住这样!

请使用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
});

“输入”对我有用。

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

您可以使用keydownkeyup并且keypress事件也是如此。

要跟踪每个示例,请在此示例之前进行操作,然后再将光标闪烁速率完全降低为零。

<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:事件在退出时生成

onchange:如果输入文本中发生任何更改,则事件在退出时生成

onkeydown:任何按键按下都会生成事件(对于长时间按住键也是如此)

onkeyup:事件在任何键释放时生成

onkeypress:与onkeydown(或onkeyup)相同,但不会对ctrl,backsace,alt其他作出反应

在这里2018,这是我的工作:

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

如果您能指出这种方法的缺陷,我将不胜感激。

方法1:为添加一个事件侦听器input

element.addEventListener("input", myFunction);

 

方法2:oninput使用JavaScript 定义属性:

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

 

方法3:oninput使用HTML 定义属性:

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

IE8不支持Robert Siemer addEventListener。

“旧版本的IE支持等效的专有EventTarget.attachEvent()方法。” https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

本文地址:http://javascript.askforanswer.com/genzongshuruleixingwenbenzhongjianrudeonchangedezuijiafangfa.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!