Oninput-Ereignis mit jQuery auslösen

Ich habe ein Oninput-Ereignis in einem Textbereich, um die Höhe zu überprüfen und die Größe zu ändern. Jetzt muss ich den Wert manchmal bearbeiten. Ich mache das einfach, indem ich val() in jQuery bearbeite, aber das löst nicht das oninput-Ereignis aus. Gibt es eine Möglichkeit, das oninput-Ereignis programmgesteuert mit jQuery auszulösen?

Benutzen .on('input'). Beispielsweise:

$('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>

Es ist ein bisschen zu spät, aber für zukünftige Referenzen gibt es die .trigger-Methode.

$("#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>

Sie können es einfach aufrufen, z.

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

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

…aber wie @Sammaye betont, hat jQuery keinen expliziten “oninput”-Handler, also müssen Sie POJS verwenden.

Demo auf JS Fiddle.

oninput ist noch nicht in JQuery enthalten.

Hier können Sie Beiträge dazu sehen:

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

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

Im Grunde ist der allgemeine Konsens, dass sie es noch nicht wollen.

Aber nein, das direkte Ändern von val() würde die html5-Eingabe nicht auslösen, da die Spezifikation besagt, dass dies der Fall ist, wenn der Benutzer in der Benutzeroberfläche den Wert der Eingabe ändert.

Bearbeiten:

Jemand hat jedoch freundlicherweise ein Plugin für Leute erstellt, die nur HTML5-Ereignisse verwenden möchten: https://github.com/dodo/jquery-inputevent

Sie können an die Eingabe und Änderung binden:

Eingang wird bei Benutzereingaben ausgelöst

Veränderung wird bei change() ausgelöst und zu val(” “) Zuweisungen, aber nach einigen Änderungen

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

nachdem du dich gebunden hast Veränderung Sie können es bei jeder val(” “)-Zuweisung manuell aufrufen:

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

oder Sie können die auszulösende Methode jQuery val(” “) überschreiben Veränderung bei jedem Aufruf von user 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);

Versuchen Sie es mit “Tastendruck” oder “Tastendruck”.

Beispiel 1:

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

Beispiel 2:

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

Drücken Sie CODE SNIPPET AUSFÜHREN, um die Ergebnisse anzuzeigen

Ich habe nach einem besseren Beispiel gesucht, um einen Eingabebereich mit einem Eingabewert zu verbinden und so
Ich habe Fernandos Beispiel in einem JQuery-Plugin modifiziert , also : für alle
<input type="range" min="1" max="100" value="50" id="range1">

Sie werden seinen Wert haben:
<input type="text" disabled id="value" class="range1" value="0">

so ist es wie bei jedem übergeordneten Bereich id=”range1″ es gibt ein untergeordnetes id=”value” Klasse = “Bereich1”

<!-- <script src="https://stackoverflow.com/questions/11189136/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>