كيف يمكنني تنفيذ onchange لـ <input type=“text”> باستخدام jQuery؟

Question

<select> لديه واجهة برمجة التطبيقات هذه.ماذا عن <input>?

Answer 1

ويمكنك استخدام .change()

$('input[name=myInput]').change(function() { ... });

ومع ذلك، فإن هذا الحدث النار فقط عندما فقدت محدد التركيز، لذلك سوف تحتاج إلى النقر فوق أي مكان آخر أن يكون هذا العمل.

وإذا كان هذا ليس صحيحا تماما بالنسبة لك، هل يمكن استخدام بعض الأحداث مسج مثل <ل أ href = "http://api.jquery.com/keyup/" يختلط = "noreferrer"> keyup و <لأ href = "http://api.jquery.com/keydown/" يختلط = "noreferrer "> keydown أو بضغطة - تبعا لتأثير تريدها بالضبط

Answer 2

وكما قالpimvdb في تعليقه،

<اقتباس فقرة>   

لاحظ أن التغيير سوف النار فقط عندما فقدت عنصر المدخلات التركيز.   وهناك أيضا حالة المدخلات التي تطلق كلما التحديثات النص   دون أن تحتاج إلى فقدان التركيز. على عكس الأحداث الرئيسية كما أنها تعمل ل   لصق / سحب النص.

و(راجع ).

وهذا مفيد جدا، فإنه يستحق وضعه في إجابة. حاليا (v1.8 *؟) لا يوجد .input () الراحة الجبهة الوطنية في مسج، وبالتالي فإن طريقة للقيام بذلك هو

$('input.myTextInput').on('input',function(e){
 alert('Changed!')
});

Answer 3

وأود أن أقترح باستخدام شيء الحدث KeyUp مثل أدناه:

$('elementName').keyup(function() {
 alert("Key up detected");
});

وهناك عدد قليل من الطرق لتحقيق نفس النتيجة لذلك اعتقد انها الى تفضيل وتعتمد على الطريقة التي تريد أن تعمل بالضبط.

تحديث: هذا يعمل فقط من أجل الإدخال اليدوي ليس نسخ ولصق

.

لنسخ ولصق وأود أن نوصي بما يلي:

$('elementName').on('input',function(e){
 // Code here
});

Answer 4

وهنا رمز يمكنني استخدام:

$("#tbSearch").on('change keyup paste', function () {
    ApplyFilter();
});

function ApplyFilter() {
    var searchString = $("#tbSearch").val();
    //  ... etc...
}

<input type="text" id="tbSearch" name="tbSearch" />

وهذا يعمل بشكل جيد جدا، وخصوصا عندما يقترن مع عنصر تحكم jqGrid. يمكنك كتابة فقط في النص و<م> على الفور عرض النتائج في jqGrid الخاص بك.

Answer 5

هنالك طريقة واحدة فقط يمكن الاعتماد عليها للقيام بذلك, وذلك عن طريق سحب القيمة في فاصل زمني ومقارنتها بقيمة مخزنة مؤقتًا.

السبب في أن هذه هي الطريقة الوحيدة هو وجود طرق متعددة لتغيير حقل الإدخال باستخدام مدخلات مختلفة (لوحة المفاتيح، الماوس، اللصق، سجل المتصفح، الإدخال الصوتي وما إلى ذلك) ولا يمكنك أبدًا اكتشافها جميعًا باستخدام الأحداث القياسية في تقاطع - بيئة المتصفح.

لحسن الحظ، بفضل البنية التحتية للحدث في jQuery، من السهل جدًا إضافة حدث تغيير الإدخال الخاص بك.لقد فعلت ذلك هنا:

$.event.special.inputchange = {
    setup: function() {
        var self = this, val;
        $.data(this, 'timer', window.setInterval(function() {
            val = self.value;
            if ( $.data( self, 'cache') != val ) {
                $.data( self, 'cache', val );
                $( self ).trigger( 'inputchange' );
            }
        }, 20));
    },
    teardown: function() {
        window.clearInterval( $.data(this, 'timer') );
    },
    add: function() {
        $.data(this, 'cache', this.value);
    }
};

استخدامه مثل: $('input').on('inputchange', function() { console.log(this.value) });

هناك عرض توضيحي هنا: http://jsfiddle.net/LGAWY/

إذا كنت خائفًا من الفواصل الزمنية المتعددة، فيمكنك ربط/إلغاء ربط هذا الحدث focus/blur.

Answer 6

<input id="item123" class="firstName" type="text" value="Hello there" data-someattr="CoolExample" />

$(".firstName").on('change keyup paste', function () {
   var element = $(this);
   console.log(element);
   var dataAttribute = $(element).attr("data-someattr");
   console.log("someattr: " + dataAttribute );
});

وأوصي استخدام this الكلمة من أجل الحصول على العنصر بالكامل حتى بك قادرون تفعل كل ما تحتاجه مع هذا العنصر.

Answer 7

$("input").keyup(function () {
    alert("Changed!");
});

Answer 8

وفيما يلي ستعمل حتى لو كان الديناميكي / اياكس يدعو.

وسيناريو:

jQuery('body').on('keyup','input.addressCls',function(){
  console.log('working');
});

والاكواد

<input class="addressCls" type="text" name="address" value="" required/>

وآمل أن هذا الرمز عمل تساعد شخص يحاول الوصول حيوي / يدعو اياكس ...

Answer 9

هل يمكن ببساطة العمل مع معرف

$("#your_id").on("change",function() {
    alert(this.value);
});

Answer 10

$("input").change(function () {
    alert("Changed!");
});

Answer 11

لقد نجح هذا بالنسبة لي.إذا كان الحقل بالاسم المجال أ تم النقر عليه أو إدخال أي مفتاح في حقل التحديثات بالمعرف المجال ب.

jQuery("input[name='fieldA']").on("input", function() {
    jQuery('#fieldB').val(jQuery(this).val());
});

Answer 12

هل يمكن استخدام .keypress() .

وعلى سبيل المثال، والنظر في HTML:

<form>
  <fieldset>
    <input id="target" type="text" value="Hello there" />
  </fieldset>
</form>
<div id="other">
  Trigger the handler
</div>

ويمكن أن تكون ملزمة معالج الحدث إلى حقل الإدخال:

$("#target").keypress(function() {
  alert("Handler for .keypress() called.");
});

وأنا أتفق تماما مع اندي. كل هذا يتوقف على الطريقة التي تريد أن تعمل.

Answer 13

ويمكنك القيام بذلك بطرق مختلفة، keyup هو واحد منهم.لكنني أعطي مثالاً أدناه مع التغيير.

$('input[name="vat_id"]').on('change', function() {
    if($(this).val().length == 0) {
        alert('Input field is empty');
    }
});

ملحوظة: الإدخال[اسم = "vat_id"] استبدال مع المدخلات الخاصة بك بطاقة تعريف أو اسم.