在输入类型="文本"中跟踪onchange类型的最佳方法？

作者：雯颜哥_135 | 2023-08-30 12:51

如何解决《在输入类型="文本"中跟踪onchange类型的最佳方法？》经验，为你挑选了8个好方法。

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

有没有办法强制浏览器onchange每次textfield内容更改时触发？如果没有,那么"手动"追踪这个最优雅的方式是什么？

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

是setTimeout唯一的方法吗？丑陋的:-)

1> Robert Sieme..：

这几天听oninput. 感觉就像onchange没有必要失去对元素的关注.这是HTML5.

它受到所有人(甚至是移动设备)的支持,除了IE8及以下版本.对于IE添加onpropertychange.我这样使用它:

const $source = document.querySelector('#source');
const $result = document.querySelector('#result');

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

$source.addEventListener('input', typeHandler) // register for oninput
$source.addEventListener('propertychange', typeHandler) // for IE8
// $source.addEventListener('change', typeHandler) // fallback for Firefox for  oninput is enough






2> Crescent Fre..：
更新:

见另一个答案(2015年).



2009年原创答案:

那么,您希望onchange事件在keydown,blur 和 paste 上触发吗？这太神奇了.

如果要在键入时跟踪更改,请使用"onkeydown".如果需要使用鼠标捕获粘贴操作,请使用"onpaste"(IE,FF3)和"oninput"(FF,Opera,Chrome,Safari ¹).

¹_在Safari上_{打破</code>.请<code>textInput</code>改用</sub></p></p>
        <hr>让onchange`解雇所有这些行动并不是很神奇.`<input onchange ="doSomething();" onkeypress事件= "this.onchange();" onpaste = "this.onchange();" oninput ="this.onchange();">`对大多数人来说都会做得很好. <hr>使用jquery 1.8.3,看起来像:`$().on('change keydown paste input',function(){})` <hr>应该使用`onkeypress`而不是`onkeydown`.单击一个键时会激活`onkeydown`.如果用户按下某个键,则该事件将仅针对第一个字符触发一次.只要将char添加到文本字段,就会触发`onkeypress`. <hr>@AriWais:是的,omg大多数SO应该被弃用.人们这个答案是*8岁*.我希望有一个"弃用"按钮用于旧答案,例如这个,社区可以选择更好的答案. <br><br><b>3> Amrit Pal Si..：</b><hr><p>下面的代码适用于Jquery 1.8.3</p>

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

<p>使用Javascript/JQuery的:</p>

<pre class="brush:bash;">$("#myId").on('change keydown paste input', function(){
      doSomething();
});
</pre></p>
        <hr>Jquery是一个Javascript api,我是通过Jquery关键字搜索来到这里的,我不认为为Jquery答案为每个javascript qustion创建一个新问题... <hr>如果不允许人们在答案中建议使用图书馆,那么就会有很多未解决的问题 <hr>jQuery**库**没有标记在问题中. <hr>触发多次。可能是由于更改和按键设置。仅在这里可能需要输入。 <br><br><b>4> Sanket Sahu..：</b><hr><p>Javascript在这里是不可预测和有趣的.</p>

<p>
<p><code>onchange</code> 仅在模糊文本框时才会出现</p>
<p><code>onkeyup</code>&<code>onkeypress</code>并不总是发生在文本更改上</p>
<p><code>onkeydown</code> 在文本更改时发生(但无法通过鼠标单击跟踪剪切和粘贴)</p>
<p><code>onpaste</code>&<code>oncut</code>有按键,甚至用鼠标右键单击发生.</p>
<p>

<p>因此,跟踪文本框中的变化,我们需要<code>onkeydown</code>,<code>oncut</code>和<code>onpaste</code>.在这些事件的回调中,如果检查文本框的值,则在回调后更改值时不会获得更新的值.因此,解决此问题的方法是设置超时功能,超时为50毫秒(或可能更短)以跟踪更改.</p>

<p>这是一个肮脏的黑客,但这是我研究的唯一方法.</p>

<p>这是一个例子.
http://jsfiddle.net/2BfGC/12/</p></p>
        <hr>`oninput`和`textInput`是事件,它是实际的解决方案但是,它并不是所有浏览器都支持的. <br><br><b>5> Fernando And..：</b><hr><p><code>onkeyup</code>例如,<code>t</code>当你按下手指后按下动作时会发生这种情况,但是<code>keydown</code>在我对角色进行数字处理之前动作就会发生<code>t</code></p>

<p>希望这对某人有帮助. </p>

<p>因此<code>onkeyup</code>,当您想要发送刚刚输入的内容时,这样做会更好.</p></p>
        <br><br><b>6> Mohnish..：</b><hr><p>我有类似的要求(推特风格的文字字段).用过<code>onkeyup</code>和<code>onchange</code>.<code>onchange</code>实际上在从现场失去焦点时处理鼠标粘贴操作.</p>

<p><em>[更新]</em>在HTML5或更高版本中,用于<code>oninput</code>获取实时字符修改更新,如上面的其他答案中所述.</p></p>
        <br><br><b>7> 小智..：</b><hr><p>如果您仅使用Internet Explorer,则可以使用以下命令:</p>

<pre class="brush:bash;"><input type="text" id="myID" onpropertychange="TextChange(this)" />

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

<p>希望有所帮助.</p></p>
        <hr>感谢上帝,我不住在那所房子里!:d <hr>10年前,这句话中没有什么好笑的.:( <hr>可能是一个内部项目我猜... :) <hr>对我来说这有帮助,我正在开发一个带有嵌入式操作系统的移动项目,其中IE是唯一的浏览器. <hr>如果仅使用Internet Explorer-大声笑。在2016年度过了美好的一天！ <br><br><b>8> Patrick Hill..：</b><hr><p>我认为在2018年使用该<code>input</code>活动会更好。</p>

<p>--</p>

<p>如WHATWG规范所述（https://html.spec.whatwg.org/multipage/indices.html#event-input-input）：</p>

<blockquote>
  <p>当用户更改值时在控件上触发（另请参见change事件）</p>
</blockquote>

<p>--</p>

<p>以下是使用方法的示例：</p>

<pre class="brush:bash;"><input type="text" oninput="handleValueChange()">
</pre></p>
            </div>

    <div class="article_ab" style="width: 720px;height: 100px;margin: 0 auto;margin-top: 15px;">

    </div>

    <div class="article_recommend">
        <div class="list_top">推荐阅读</div>
        <div class="ListItems">
            <ul class="NewsList">
                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/openshift_RangWo_ba16b4c1.html" target="_blank" title="openshift让我们加密证书">openshift让我们加密证书</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《openshift让我们加密证书》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/openshift_RangWo_ba16b4c1.html" target="_blank" title="openshift让我们加密证书">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/ShiYongXieYiJian_9329f54b.html" target="_blank" title="使用协议将案例添加到现有枚举">使用协议将案例添加到现有枚举</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《使用协议将案例添加到现有枚举》经验，为你挑选了3个好方法。 ...
                        <a href="https://devbox.cn/p/ShiYongXieYiJian_9329f54b.html" target="_blank" title="使用协议将案例添加到现有枚举">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/DuoXiangRenWuHun_515d2220.html" target="_blank" title="多项任务混淆">多项任务混淆</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《多项任务混淆》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/DuoXiangRenWuHun_515d2220.html" target="_blank" title="多项任务混淆">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_CoreData_Zho_da6fb90e.html" target="_blank" title="在Core Data中存储Swift值类型">在Core Data中存储Swift值类型</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在CoreData中存储Swift值类型》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_CoreData_Zho_da6fb90e.html" target="_blank" title="在Core Data中存储Swift值类型">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RuHeZai_MSWIndow_41d24219.html" target="_blank" title="如何在MS WIndows 7中获取音频设备的插孔信息">如何在MS WIndows 7中获取音频设备的插孔信息</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《如何在MSWIndows7中获取音频设备的插孔信息》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RuHeZai_MSWIndow_41d24219.html" target="_blank" title="如何在MS WIndows 7中获取音频设备的插孔信息">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Cong_varagin_Jia_028566c2.html" target="_blank" title="从varagin将可变数量的字符串传递给MATLAB函数">从varagin将可变数量的字符串传递给MATLAB函数</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《从varagin将可变数量的字符串传递给MATLAB函数》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Cong_varagin_Jia_028566c2.html" target="_blank" title="从varagin将可变数量的字符串传递给MATLAB函数">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/WeiShiMe_OracleJ_29b039fb.html" target="_blank" title="为什么Oracle Java编译器不能在这里推断出界限,但Eclipse可以？">为什么Oracle Java编译器不能在这里推断出界限,但Eclipse可以？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《为什么OracleJava编译器不能在这里推断出界限,但Eclipse可以？》经验，为你挑选了0个好方法。 ...
                        <a href="https://devbox.cn/p/WeiShiMe_OracleJ_29b039fb.html" target="_blank" title="为什么Oracle Java编译器不能在这里推断出界限,但Eclipse可以？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_SQL_YouLianJ_6ff7485e.html" target="_blank" title="在SQL右连接中加入约束做什么吗？">在SQL右连接中加入约束做什么吗？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在SQL右连接中加入约束做什么吗？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_SQL_YouLianJ_6ff7485e.html" target="_blank" title="在SQL右连接中加入约束做什么吗？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/BaoZhuang_std--i_03436ef9.html" target="_blank" title="包装std :: ignore">包装std :: ignore</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《包装std::ignore》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/BaoZhuang_std--i_03436ef9.html" target="_blank" title="包装std :: ignore">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Zai_MSExcel_Zhon_74b6d996.html" target="_blank" title="在MS Excel中计算具有特定数据类型的单元格数">在MS Excel中计算具有特定数据类型的单元格数</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《在MSExcel中计算具有特定数据类型的单元格数》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Zai_MSExcel_Zhon_74b6d996.html" target="_blank" title="在MS Excel中计算具有特定数据类型的单元格数">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Python_ShiYong_h_132b0823.html" target="_blank" title="Python使用https的代理请求API以获得407代理身份验证">Python使用https的代理请求API以获得407代理身份验证</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Python使用https的代理请求API以获得407代理身份验证》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Python_ShiYong_h_132b0823.html" target="_blank" title="Python使用https的代理请求API以获得407代理身份验证">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Windows_He_Syste_8cca769b.html" target="_blank" title="Windows和System命名空间之间有什么区别？">Windows和System命名空间之间有什么区别？</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Windows和System命名空间之间有什么区别？》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Windows_He_Syste_8cca769b.html" target="_blank" title="Windows和System命名空间之间有什么区别？">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Android-Recycler_20b70075.html" target="_blank" title="Android-Recycler视图设置项无法滑动">Android-Recycler视图设置项无法滑动</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Android-Recycler视图设置项无法滑动》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/Android-Recycler_20b70075.html" target="_blank" title="Android-Recycler视图设置项无法滑动">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/BiMian_-ipa_Zhon_66bd802b.html" target="_blank" title="避免.ipa中的SwiftSupport文件夹">避免.ipa中的SwiftSupport文件夹</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《避免.ipa中的SwiftSupport文件夹》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/BiMian_-ipa_Zhon_66bd802b.html" target="_blank" title="避免.ipa中的SwiftSupport文件夹">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/JTable_De_RowSor_f063589b.html" target="_blank" title="JTable的RowSorter没有正确排序整数(1,10,100 ... 2,20 ... 3)">JTable的RowSorter没有正确排序整数(1,10,100 ... 2,20 ... 3)</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《JTable的RowSorter没有正确排序整数(1,10,1002,203)》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/JTable_De_RowSor_f063589b.html" target="_blank" title="JTable的RowSorter没有正确排序整数(1,10,100 ... 2,20 ... 3)">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/Swift-_JiangKong_c1e5ccc4.html" target="_blank" title="Swift  - 将控制台日志重定向到文档文件夹">Swift  - 将控制台日志重定向到文档文件夹</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《Swift-将控制台日志重定向到文档文件夹》经验，为你挑选了2个好方法。 ...
                        <a href="https://devbox.cn/p/Swift-_JiangKong_c1e5ccc4.html" target="_blank" title="Swift  - 将控制台日志重定向到文档文件夹">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/CongGuoLvQiFanHu_5499a7c7.html" target="_blank" title="从过滤器返回第一个元素或无">从过滤器返回第一个元素或无</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《从过滤器返回第一个元素或无》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/CongGuoLvQiFanHu_5499a7c7.html" target="_blank" title="从过滤器返回第一个元素或无">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/BigQuery_ZhongSh_594d9e85.html" target="_blank" title="BigQuery中是否有"WITH"子句">BigQuery中是否有"WITH"子句</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《BigQuery中是否有"WITH"子句》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/BigQuery_ZhongSh_594d9e85.html" target="_blank" title="BigQuery中是否有"WITH"子句">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/CongLingYiGe_Dat_225fed6f.html" target="_blank" title="从另一个DataFrame.describe（）创建DataFrame-熊猫">从另一个DataFrame.describe（）创建DataFrame-熊猫</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《从另一个DataFrame.describe（）创建DataFrame-熊猫》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/CongLingYiGe_Dat_225fed6f.html" target="_blank" title="从另一个DataFrame.describe（）创建DataFrame-熊猫">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                                <li>
                    <div class="NewTitle">
                        <a class="cat" href="/tag/程序员" title="程序员" target="_blank">程序员<i></i></a>
                        <h2><a href="https://devbox.cn/p/RenWuWanChengHou_919240c7.html" target="_blank" title="任务完成后运行一个函数">任务完成后运行一个函数</a></h2>
                    </div>

                    <div class="NewsInfo">
                                                <div class="NewsDesc" >
                        如何解决《任务完成后运行一个函数》经验，为你挑选了1个好方法。 ...
                        <a href="https://devbox.cn/p/RenWuWanChengHou_919240c7.html" target="_blank" title="任务完成后运行一个函数">[详细]</a>
                    </div>
                    <div style="clear:both"></div>

                </li>


                

            </ul>
        </div>
    </div>

    <div class="article_cmnt" style="display: none;">
        <div class="cmnt_title">吐了个 "CAO" !</div>
        <form action="" method="post">
            <div class="cmnt_text">
                <textarea class="ping-txt" onfocus="ck_txt(this);" onblur="ck_txt2(this);" id="ping-txt" name="ping-txt" >吐个槽吧,看都看了}


            
                
                                        会员登录 | 用户注册