我在 textarea 上有一个 oninput 事件来检查高度并调整它的大小。现在我有时需要编辑值。我只是通过在 jQuery 中编辑 val() 来做到这一点,但这不会触发 oninput 事件。有什么方法可以使用 jQuery 以编程方式触发 oninput 事件?
7 回答
使用.on('input')
. 例如:
$('textarea').on('input', function() {
text = $('textarea').val();
$('div').html(text);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea placeholder="Type something here"></textarea>
<div></div>
有点晚了,但为了将来参考,有 .trigger 方法。
$("#testArea").on("input", function(e) {
$("#outputArea").text( $(e.target).val() )
});
$("#testArea").val("This is a test");
$("#testArea").trigger("input");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input id="testArea" type="text" />
<div id="outputArea"></div>
您可以简单地调用它,例如:
$("input")[0].oninput = function () {
alert("hello");
};
$("input")[0].oninput();
...但正如@Sammaye 指出的那样,jQuery 没有明确的“oninput”处理程序,因此您必须使用 POJS。
oninput 实际上还没有在 JQuery 中。
你可以在这里看到关于它的帖子:
http://forum.jquery.com/topic/html5-oninput-event
http://bugs.jquery.com/ticket/9121
基本上普遍的共识是他们还不想要它。
但是不,直接更改 val() 不会触发 html5 oninput,因为它的规范声明它是当用户在 UI 中更改输入的值时。
编辑:
然而,有人为希望仅使用 HTML5 事件的人制作了一个插件:https ://github.com/dodo/jquery-inputevent
您可以绑定到输入和更改:
输入将在用户输入时触发
change将在 change()和 to val(" ") 分配时触发,但经过一些更改
$("#textarea").bind("input change", function() {
alert("change happend");
});
...
绑定更改后,您可以在每个 val(" ") 分配上手动调用它:
$("#textarea").val("text").change();
或者您可以覆盖 jQuery val(" ") 方法以触发每个用户 val(" ") 调用的更改:
(function ($) { var fnVal = $.fn.val;
$.fn.val = function(value) {
if (typeof value == 'undefined') {
return fnVal.call(this);
}
var result = fnVal.call(this, value);
$.fn.change.call(this); // calls change()
return result;
};
})(jQuery);
尝试使用“keypress”或“keydown”。
示例 1:
$("#textarea").keypress(function(){
alert($("#textarea").val());
});
示例 2:
$("#textarea").keydown(function(){
alert($("#textarea").val());
});
推送 RUN CODE SNIPPET 以查看结果
我一直在寻找一个更好的例子来将输入范围连接到输入值,所以
我在 JQuery 插件中修改了费尔南多的例子,所以:对于每个
<input type="range" min="1" max="100" value="50" id="range1">
你都会有他的价值:
<input type="text" disabled id="value" class="range1" value="0">
所以就像任何父范围id=" range1"有一个孩子 id="value" class="range1"
<!-- <script src="../js/jquery.js"></script> -->
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
1<input type="range" min="1" max="100" value="50" id="range1"><input type="text" disabled id="value" class="range1" value="0"><br>
2<input type="range" min="1" max="100" value="50" id="range2"><input type="text" disabled id="value" class="range2" value="0"><br>
3<input type="range" min="1" max="100" value="50" id="range3"><input type="text" disabled id="value" class="range3" value="0"><br>
4<input type="range" min="1" max="100" value="50" id="range4"><input type="text" disabled id="value" class="range4" value="0"><br>
...<br>
n<input type="range" min="1" max="100" value="50" id="rangen"><input type="text" disabled id="value" class="rangen" value="0"><br>
<script type="text/javascript">
<!--
$(document).ready(function() {
$('input').on("input",function(){
$('input').each(function(index) {
//console.log('1 '+index + ': ' + $(this).text()+',id='+$(this).attr('id'));
if($(this).attr('id')=='value'){
//console.log('2 class='+$(this).attr('class'));
var obj=$('input#'+$(this).attr('class') );
var hisvalue=$(this);
//console.log('3 parent`s value='+obj.val() );
obj.on("input",function(){
hisvalue.val(obj.val());
});
}
});
});
$('input').trigger("input");
});
//-->
</script>