<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
<input type="text">的值可以通过多种方式改变,包括:
按键 复制/粘贴 JavaScript修改 由浏览器或工具栏自动完成
我希望在JavaScript函数发生变化时调用它(使用当前输入值)。我希望它能马上被调用,而不是在输入失去焦点的时候。
我正在寻找最干净和最健壮的方法来跨所有浏览器(最好使用jQuery)。
当前回答
把这段代码添加到某个地方,就可以了。
var originalVal = $.fn.val;
$.fn.val = function(){
var result =originalVal.apply(this,arguments);
if(arguments.length>0)
$(this).change(); // OR with custom event $(this).trigger('value-changed');
return result;
};
发现这个解决方案在val()不触发change()在jQuery
其他回答
您可以简单地识别表单中的所有更改者,如下所示
//when form change, show aleart
$("#FormId").change(function () {
aleart('Done some change on form');
});
jQuery >= 1.7的实时解决方案已经启动
$("#input-id").on("change keyup paste", function(){
dosomething();
})
如果你还想检测“点击”事件,只需:
$("#input-id").on("change keyup paste click", function(){
dosomething();
})
如果你使用jQuery <= 1.6,使用bind或live代替on。
我已经创建了一个样本。希望它对你有用。
var typingTimer;
var doneTypingInterval = 10;
var finaldoneTypingInterval = 500;
var oldData = $("p.content").html();
$('#tyingBox').keydown(function () {
clearTimeout(typingTimer);
if ($('#tyingBox').val) {
typingTimer = setTimeout(function () {
$("p.content").html('Typing...');
}, doneTypingInterval);
}
});
$('#tyingBox').keyup(function () {
clearTimeout(typingTimer);
typingTimer = setTimeout(function () {
$("p.content").html(oldData);
}, finaldoneTypingInterval);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<textarea id="tyingBox" tabindex="1" placeholder="Enter Message"></textarea>
<p class="content">Text will be replace here and after Stop typing it will get back</p>
http://jsfiddle.net/utbh575s/
下面是一个工作示例,我使用它来实现一个填充jqueryui选择器(列表)的自动补全变体,但我不希望它的功能完全像jqueryui自动补全那样做一个下拉菜单。
$("#tagFilter").on("change keyup paste", function() {
var filterText = $("#tagFilter").val();
$("#tags").empty();
$.getJSON("http://localhost/cgi-bin/tags.php?term=" + filterText,
function(data) {
var i;
for (i = 0; i < data.length; i++) {
var tag = data[i].value;
$("#tags").append("<li class=\"tag\">" + tag + "</li>");
}
});
});
你就不能用<span contenteditable="true" spellcheck="false">元素来代替<input type="text">吗?
<span>(以contenteditable="true" spellcheck="false"作为属性)与<input>区别很大,主要是因为:
它的样式不是<input>。 它没有value属性,但文本被呈现为innerText,并成为其内部主体的一部分。 它是multiline,而<input>不是,尽管你设置了属性multiline="true"。
要完成外观,当然,你可以用CSS样式,而将值写成innerText,你可以为它获得一个事件:
这是小提琴。
不幸的是,有一些东西在IE和Edge中实际上不起作用,我无法找到。