文本框输入后立即触发事件

发布于2017-02-21  660次阅读


文本框输入事件:onchange 、onkeyup 、onblur

onchange在用于文本框输入框时,有一个明显的不足. 事件不会随着文字的输入而触发,而是等到文本框失去焦点(onblur)时才会触发. 也就是没有即时性!

为了达到在文本框中输入内容后,立即触发事件,可以用onkeyup事件,

在IE下,可以用onpropertychange来代替onchange事件,当文本框有任何变化时,能立即触发此事件.

兼容浏览器可以用oninput事件,谷歌浏览器、IE10测试没问题 没测试是否兼容其他浏览器

下面附上我自己做的一个例子

需求:输入文本框后,检索下拉框选项,匹配则设为选中项,不匹配则把选中项改成默认第一个

方法一:使用onkeyup

<script language="JavaScript">

//因为是嵌套在母板页中,所以获取下拉框这样写:$("#<%=ddlCountry.ClientID%>"),如果不嵌套在母板页,可以这样写:$("#ddlCountry")

function Search() {
var countryCount = 0; //国家总个数
var notEqualCount = 0;//输入内容与国家不匹配的个数
$("#<%=ddlCountry.ClientID%>").each(function () {
$(this).find("option").each(function () {
countryCount++;
if ($(this).val() == $("#txtTest").val() || $(this).text() == $("#txtTest").val()) {//文本框的值与下拉框的value、text对比
$(this).attr("selected", "selected"); //选中
} else {
notEqualCount++;
}
});
});
if (countryCount != 0 && notEqualCount != 0 && countryCount == notEqualCount) {//输入的值与下拉框的值不匹配
$("#<%=ddlCountry.ClientID%>").get(0).selectedIndex = 0;
}
}
</script>

国家:<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
<input type="text" id="txtTest" onkeyup="Search()"  />

方法二:使用oninput事件

<script language="javascript">
$(document).ready(function () {
$('#txtTest').bind('input', function () {//给文本框绑定input事件
if ($('#txtTest').val().trim() != "") {
var countryCount = 0; //国家总个数
var notEqualCount = 0; //输入内容与国家不匹配的个数
$("#<%=ddlCountry.ClientID%>").each(function() {
$(this).find("option").each(function() {
countryCount++;
if ($(this).val() == $("#txtTest").val() || $(this).text() == $("#txtTest").val()) {
$(this).attr("selected", "selected");
} else {
notEqualCount++;
}
});
});
if (countryCount != 0 && notEqualCount != 0 && countryCount == notEqualCount) {
$("#<%=ddlCountry.ClientID%>").get(0).selectedIndex = 0;
alert("没有您输入的国家");
}
}
});
});

国家:<asp:DropDownList ID="ddlCountry" runat="server"></asp:DropDownList>
<input type="text" id="txtTest"  />

参考文章:http://koyoz.com/blog/?action=show&id=225

http://calefy.org/2012/11/12/javascript-key-events-and-input-control.html

 

本文转发至:http://blog.csdn.net/meizhiyun/article/details/16982613 如有意见,请联系博客作者删除!


  • 微信或支付宝

道,可道,非常道;名,可名,非常名。