jQuery 'ইনপুট' ইভেন্ট


206

আমি inputএই jsfiddle না দেখার আগে আমি jQuery নামক কোনও ইভেন্টের কথা শুনিনি

আপনি জানেন কেন এটি কাজ করছে? এটি কোনও নাম keyupবা কোনও কিছুর জন্য ?

$(document).on('input', 'input:text', function() {});


12
changeমাঠে ফোকাস হারিয়ে ফেললে কেবল আগুন ছাড়া । inputঅবিলম্বে আগুন।
jcsanyi

3
আপনি এটি অনুসন্ধান করার চেষ্টা করেছেন?
undefined

2
@ সংজ্ঞায়িত হ্যাঁ আমার আছে, অন্যথায় আমি এটির জন্য একটি প্রশ্ন তৈরি করতাম না। গুগলে একমাত্র যে বিষয়টি সামনে আসে সেগুলি হ'ল input উপাদান এবং এর সাথে কীভাবে ইভেন্টগুলি সংযুক্ত করা যায় সে সম্পর্কে নিবন্ধগুলি ।
সিল্কফায়ার

3
এই প্রশ্নের সুন্দর উত্তর সব ধারণা - stackoverflow.com/questions/15727324/...
GemK

উত্তর:


197

ঘটে যখন ব্যবহারকারীর ইন্টারফেসের মাধ্যমে কোনও উপাদানটির পাঠ্য সামগ্রী পরিবর্তন করা হয়।

এটি একেবারে কোনও উপাধ নয় keyupকারণ keyupকীটি কিছু না করলেও গুলি চালিত হবে (উদাহরণস্বরূপ: কন্ট্রোল কী টিপুন এবং তারপরে রিলিজ করা কোনও keyupইভেন্টকে ট্রিগার করবে )।

এটি সম্পর্কে ভাবার একটি ভাল উপায় এটির মতো: এটি এমন একটি ইভেন্ট যা ট্রিপ করে যখনই ইনপুট পরিবর্তন হয়। এতে অন্তর্ভুক্ত রয়েছে - তবে সীমাবদ্ধ নয় - কীগুলি টিপুন যা ইনপুট পরিবর্তন করে (সুতরাং উদাহরণস্বরূপ, Ctrlনিজেই ইভেন্টটি ট্রিগার করবে না, তবে Ctrl-Vকিছু পাঠ্য পেস্ট করবে), একটি স্বয়ংক্রিয়-সমাপ্তির বিকল্প নির্বাচন করে লিনাক্স-শৈলীর মাঝখানে ক্লিক করুন পেস্ট, ড্রাগ এবং ড্রপ এবং অন্যান্য অনেক কিছুই।

দেখুন এই পৃষ্ঠা এবং আরো বিস্তারিত জানার জন্য এই উত্তরে মন্তব্য নেই।


11
আপনি কি জানেন যে jQuery অনুপস্থিত ব্রাউজার সমর্থন করে? (
আইই

4
আমি সবেমাত্র 'জেএস ইনপুট ইভেন্ট' গুগল করেছি। গুগলে আপনি কী চান তা খুঁজে পেতে কী শর্তাদি ব্যবহার করতে হবে তা জানার জন্য একটি কৌশল রয়েছে; এটা অভিজ্ঞতা সঙ্গে আসে। এবং তারপরে অবশ্যই গুগল সব কিছু রেকর্ড করে এবং আপনি আসলে কী চান তা শিখতে এটি ব্যবহার করে। আমার বেশিরভাগ অনুসন্ধানগুলি এপিআই ডক্স এবং প্রোগ্রামিং প্রশ্নগুলির জন্য, সুতরাং সময়ের সাথে এটি শিখে গেছে যে যখন আমি জিনিসগুলি অনুসন্ধান করি তখন এটি আমাকে এপিআই ডক্স এবং প্রোগ্রামিংয়ের উত্তরগুলি দেখায়।
জে ডেভিড স্মিথ

3
ঠিক আছে, আমি "jQuery ইনপুট ইভেন্ট" সন্ধান করছিলাম, এটি কোনও আসল জেএস ইভেন্ট আমার ধারণা ছিল না। এখানেও, প্রথম ফলাফলগুলি সাধারণত এসও থেকে আসে, যা আমি বেশিরভাগই ডি-ফ্যাক্টো উত্তর / তথ্যের সরকারী উত্স হিসাবে বিবেচনা করি।
সিল্কফায়ার

18
inputপ্রকৃতপক্ষে কেবলমাত্র একটি ফিল্টারডের চেয়ে বেশি keyup, উদাহরণস্বরূপ এটি ব্যবহৃত হবে যখন পূর্বে ব্যবহৃত মানগুলির তালিকা থেকে মানটি নির্বাচন করা হত ... এটি এমন কিছু ছিল যা কোনও inputইভেন্ট না থাকলে পরিচালনা করতে খুব কষ্ট হত ।
szeryf

2
oninputযখন পাঠ্যটি মাউস দ্বারা পরিবর্তন করা হয় তখন (আগুনে টানুন এবং ড্রপের মাধ্যমে, অথবা ডান-ক্লিক মেনু দ্বারা বা পেস্ট করতে মিডল ক্লিক করুন)।
ডিলিলসন সা মিয়া

157

oninput ইনপুট ক্ষেত্রের পরিবর্তনগুলি ট্র্যাক করতে ইভেন্টটি খুব দরকারী।

তবে এটি আইই সংস্করণ <9 এ সমর্থিত নয় তবে পুরানো আইই সংস্করণগুলির নিজস্ব মালিকানাধীন ইভেন্ট রয়েছে onpropertychangeযা একই রকম হয় oninput

সুতরাং আপনি এটি এইভাবে ব্যবহার করতে পারেন:

$(':input').on('input propertychange');

একটি সম্পূর্ণ ক্রসব্রোজার সমর্থন আছে।

যেহেতু সম্পত্তি পরিবর্তনটি যে কোনও সম্পত্তি পরিবর্তনের জন্য ট্রিগার করা যেতে পারে, উদাহরণস্বরূপ, অক্ষম সম্পত্তি পরিবর্তন করা হয়, তারপরে আপনি এটি অন্তর্ভুক্ত করতে চান:

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

10
ঠিক আমার যা প্রয়োজন ছিল। ধন্যবাদ. (<
আই

আরও কিছু তথ্য: "কোনও ইনপুট ক্ষেত্রে পাঠ্য ফেলে দেওয়ার পরে অপেরা কোনও ইনপুট ইভেন্টে আগুন জ্বালায় না IE আইই 9 কোনও ইনপুট ইভেন্ট নিক্ষেপ করে না যখন ব্যবহারকারী কীবোর্ড, কাটা, বা টানুন ক্রিয়া দ্বারা ভরাট ইনপুট থেকে অক্ষরগুলি সরিয়ে ফেলেন।" বিকাশকারী.মোজিলা.আর.ইন-
ইউএস

এই কোডটিতে সমস্যা আছে's যদি ইনপুট উপাদানটিতে সর্বাধিক দৈর্ঘ্য সেট করা থাকে, সর্বাধিক দৈর্ঘ্য পৌঁছে গেলেও এবং মানটি পরিবর্তন না
হওয়াতেও

তবে কেন কেবল দুটি পৃথক ফাংশন নয়? এইভাবে, ইভেন্টের ধরণ বা সম্পত্তির নাম পরীক্ষা করার দরকার নেই। কোডটি তৃতীয় ভাগ করা ফাংশনে থাকতে পারে।
এডিটিসি

17

JQuery ব্যবহার করে, নিম্নলিখিতগুলি কার্যকরভাবে অভিন্ন:

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

সঙ্গে inputঘটনা, কিন্তু, শুধুমাত্র দ্বিতীয় প্যাটার্ন আমি কোন ব্রাউজার পরীক্ষিত থাকেন কাজ বলে মনে হয়।

সুতরাং, আপনি এটি কাজ করে আশা করতে চান, কিন্তু এটি করে না (অন্তত বর্তমানে):

$(':text').input(function(){ doSomething(); });

আবার, যদি আপনি ইভেন্টের প্রতিনিধিটি লাভ করতে চান (উদাহরণস্বরূপ #containerআপনার input.textডমটিতে যুক্ত হওয়ার আগে ইভেন্টটি সেট আপ করতে ), এটি মনে রাখা উচিত:

$('#container').on('input', ':text', function(){ doSomething(); });

দুঃখের বিষয়, আবার, এটি বর্তমানে কাজ করে না!

কেবলমাত্র এই প্যাটার্নটিই কাজ করে:

$(':text').on('input', function(){ doSomething(); });

আরও বেশি তথ্য সহ সম্পাদনা করুন

আমি অবশ্যই নিশ্চিত করতে পারি যে এই প্যাটার্নটি:

$('#container').on('input', ':text', function(){ doSomething(); });

এখন সমস্ত 'স্ট্যান্ডার্ড' ব্রাউজারগুলিতেও কাজ করে।


2

ক্লাস্ট্রোফোব যেমন বলেছে, আইএন 9 + এর জন্য অনিনপুট সমর্থিত।

তবে , "ইন্টারনেট এক্সপ্লোরার 9-এ অনিনপুট ইভেন্টটি বগি হয় যখন কেবলমাত্র অক্ষরগুলি সন্নিবেশ করা হয় তখন কেবল ব্যবহারকারী ইন্টারফেসের মাধ্যমে কোনও পাঠ্য ক্ষেত্র থেকে অক্ষরগুলি মুছে ফেলা হয় না। তবে অনপ্লেরটি পরিবর্তন ইভেন্টটি ইন্টারনেট এক্সপ্লোরার 9 এ সমর্থিত হলেও এটি একইভাবে অনিনপুট ইভেন্ট, এটিও বগি, এটি মুছে ফেলা হয় না।

যেহেতু অক্ষরগুলি বিভিন্ন উপায়ে মুছে ফেলা যায় (ব্যাকস্পেস এবং মুছুন কী, সিটিআরএল + এক্স, প্রসঙ্গ মেনুতে কমান্ড এবং মুছুন কমান্ড), সমস্ত পরিবর্তন সনাক্ত করার জন্য কোনও ভাল সমাধান নেই। কনটেক্সট মেনু মুছুন কমান্ড দ্বারা অক্ষরগুলি মুছে ফেলা হলে, ইন্টারনেট এক্সপ্লোরার 9 এ জাভাস্ক্রিপ্টে পরিবর্তনটি সনাক্ত করা যায় না ""

আমার ইনপুট এবং কীআপ উভয় (এবং কীডাউন, যদি আপনি ব্যাকস্পেস কী ধরে রাখার সময় আইইতে এটি চালিত করতে চান তবে) এর জন্য ভাল ফলাফল বন্ডিং রয়েছে।


2

ইনপুট ব্যবহার করার সময় সাবধানতা অবলম্বন করুন। এই ইভেন্টটি ফোকাসে এবং আইই ১১-এ অস্পষ্টতার জন্য আগুন জ্বলে উঠেছে তবে এটি অন্যান্য ব্রাউজারগুলিতে পরিবর্তনের জন্য ট্রিগার করা হয়েছে।

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus


1

আমি মনে করি যে 'ইনপুট' কেবল এখানে ডম লেভেল ও ইভেন্ট মডেলের 'অনিনপুট' একইভাবে কাজ করে।

উল্লেখ্য:

সিল্কফায়ার ঠিক যেমন মন্তব্য করেছে, আমিও 'jQuery ইনপুট ইভেন্ট' এর জন্য গুগল করেছি। সুতরাং আমাকে এখানে নিয়ে যাওয়া হয়েছিল এবং জেনে অবাক হয়ে গেল যে 'ইনপুট' jquery এর বাইন্ড () কমান্ডের একটি গ্রহণযোগ্য পরামিতি । ইন অ্যাকশন মধ্যে jQuery এর (পি। 102, 2008 ইডি।) 'ইনপুট' (20 অন্যদের বিরুদ্ধে 'দাগ' থেকে 'আন' থেকে) একটি সম্ভাব্য ঘটনা হিসেবে mentionned করা হয় না। এটি সত্য যে, পি। 92, বিপরীতটি পুনরায় পড়া (যেমন স্তর 0 এবং স্তর 2 মডেলের মধ্যে বিভিন্ন স্ট্রিং শনাক্তকারীদের একটি রেফারেন্স থেকে) থেকে সুরক্ষিত হতে পারে। এটি বেশ বিভ্রান্তিকর।


ইনপুটটির জন্য ধন্যবাদ (কোনও পাং উদ্দেশ্য নয়), এটি এখন একটি সরকারী থ্রেড বলে মনে হচ্ছে! :)
সিল্কফায়ার

0

jQuery .on()পদ্ধতির জন্য নিম্নলিখিত স্বাক্ষর রয়েছে :.on( events [, selector ] [, data ], handler )

ইভেন্টগুলি এই রেফারেন্সের তালিকাভুক্ত যে কোনও হতে পারে:

https://developer.mozilla.org/en-US/docs/Web/Events

যদিও তারা প্রতিটি ব্রাউজার দ্বারা সমর্থিত নয়।

মোজিলা ইনপুট ইভেন্ট সম্পর্কে নিম্নলিখিতটি জানিয়েছে:

যখন কোনও উপাদান বা উপাদানটির মান পরিবর্তন করা হয় তখন ডিওএম ইনপুট ইভেন্টটি সিঙ্ক্রোনজ ফায়ার করা হয়। অতিরিক্তভাবে, যখন বিষয়বস্তু পরিবর্তন করা হয় তখন এটি সন্তোষজনক সম্পাদকদের উপর গুলি চালায়।


-8
$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

আইই ও ক্রোম উভয় ক্ষেত্রেই কাজ করছে


bindঅবচয়, ব্যবহারon
তুষার
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.