web-dev-qa-db-ja.com

jQueryでoninputイベントを起動する

Textareaにoninputイベントがあり、高さを確認してサイズを変更します。ここで、値を時々編集する必要があります。 jQueryでval（）を編集するだけでこれを行いますが、oninputイベントはトリガーされません。 jQueryでoninputイベントをプログラムでトリガーする方法はありますか？

javascriptjqueryhtml5events
33
Deep Frozen

.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>
22
Paul Jones

少し遅すぎますが、今後の参考のために、.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>
29
Fernando

単に呼び出すことができます、例えば：

$("input")[0].oninput = function () {
   alert("hello"); 
};

$("input")[0].oninput();

...しかし、@ Sammayeが指摘しているように、jQueryには明示的な「oninput」ハンドラーがないため、POJSを使用する必要があります。

JS Fiddleのデモ 。

17
karim79

oninputはまだ実際にはJQueryに含まれていません。

ここに関する投稿を見ることができます：

http://forum.jquery.com/topic/html5-oninput-event

http://bugs.jquery.com/ticket/9121

基本的に、一般的なコンセンサスは、彼らはまだそれを望んでいないということです。

しかし、val（）を直接変更しても、ユーザーがUIで入力の値を変更したときの仕様であるため、html5 oninputはトリガーされません。

編集：

ただし、HTML5のみのイベントを使用したい人のために、誰かが親切にプラグインを作成しています： https://github.com/dodo/jquery-inputevent

7
Sammaye

入力にバインドして変更できます：

入力はユーザー入力でトリガーされます

changeはchange（）でトリガーされますおよびval（ ""）割り当てに、ただし変更後

$("#textarea").bind("input change", function() {
    alert("change happend");
});
...

changeにバインドした後、val（ ""）割り当てごとに手動で呼び出すことができます。

$("#textarea").val("text").change();

または、jQuery val（ ""）メソッドを上書きして、各ユーザーval（ ""）呼び出しでchangeをトリガーできます。

(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);
5
ungalcrys

RUN CODE SNIPPETを押して結果を確認します

入力範囲を入力値に結合するためのより良い例を探していますi JQueryプラグインのFernandoの例を修正しました、so：すべての<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>
0
Constantin

「keypress」または「keydown」で試してください。

例1：

$("#textarea").keypress(function(){
    alert($("#textarea").val());
});

例2：

$("#textarea").keydown(function(){
    alert($("#textarea").val());
});
0
CrsCaballero