JQuery ইনপুট পরিবর্তন সনাক্ত করছে?


359

ইভেন্টে jquery ব্যবহার .changeকরার inputসময় কেবল ইনপুট ফোকাস হারাতে হবে

আমার ক্ষেত্রে, ইনপুট মান পরিবর্তন হওয়ার সাথে সাথে আমাকে পরিষেবাতে (মানটি বৈধ কিনা তা পরীক্ষা করে দেখুন)। আমি কীভাবে এটি সম্পাদন করতে পারি?


3
কি ইনপুট? পাঠ্যবাক্স? চেকবক্সটি? রেডিও? পাঠ্য এলাকা? আসুন দেখুন এখন পর্যন্ত আপনি কী নিয়ে এসেছেন
প্যাট্রিসিয়া

দুঃখিত, এটি টাইপ পাঠ্যের একটি ইনপুট। এবং যেমনটি আমি বলেছি, আমি পরিবর্তনের চেষ্টা করেছি তবে এটি আমার প্রয়োজনমতো চালায় না (ইনপুটটিতে পাঠ্যের প্রতিটি পরিবর্তনের জন্য)। আমি কীডাউন চেষ্টাও করেছি কিন্তু এই কাজটি পেতে আমাকে ইনপুট "নোংরা" আছে কিনা তা ট্র্যাক করে রাখতে হবে।
বনশে

2
যদি তারা কোনও কী টিপে থাকে তবে এটি সময়ের 99% পরিবর্তন হতে চলেছে, আপনি ইভেন্টের হ্যান্ডলারে না থাকা কীগুলির জন্য সর্বদা একটি চেক করতে পারেন।
প্যাট্রিসিয়া

উত্তর:


545

ব্যাখ্যা এবং উদাহরণের জন্য আপডেট করা D

উদাহরণ: http://jsfiddle.net/pxfunc/5kpeJ/

পদ্ধতি 1. inputইভেন্ট

আধুনিক ব্রাউজারগুলিতে inputইভেন্টটি ব্যবহার করুন । ব্যবহারকারী যখন কোনও পাঠ্য ক্ষেত্রে টাইপ করে, আটকানো, পূর্বাবস্থায় ফেলা হয়, মূলত যে কোনও সময় মান একটি মান থেকে অন্যটিতে পরিবর্তিত হয় যখন এই ইভেন্টটি ছড়িয়ে যাবে।

JQuery এ এটি করুন

$('#someInput').bind('input', function() { 
    $(this).val() // get the current value of the input field.
});

jQuery এর 1.7 দিয়ে শুরু, প্রতিস্থাপন bindসঙ্গে on:

$('#someInput').on('input', function() { 
    $(this).val() // get the current value of the input field.
});

পদ্ধতি 2. keyupইভেন্ট

পুরানো ব্রাউজারগুলির জন্য keyupইভেন্টটি ব্যবহার করুন (কীবোর্ডের কীটি প্রকাশের পরে এটি একবার জ্বলে উঠবে, এই ইভেন্টটি এক ধরণের ভুল ধনাত্মকতা দিতে পারে কারণ "ডাব্লু" প্রকাশিত হলে ইনপুট মান পরিবর্তন করা হয় এবং keyupইভেন্টটি জ্বলতে থাকে, তবে যখন "শিফট" কীটি keyupইভেন্টের আগুনে প্রকাশিত হয়েছে তবে ইনপুটটিতে কোনও পরিবর্তন আনা হয়নি।) এছাড়াও ব্যবহারকারী যদি প্রসঙ্গ মেনু থেকে ডান ক্লিক করে এবং পেস্ট করে তবে এই পদ্ধতিটি চালিত হবে না:

$('#someInput').keyup(function() {
    $(this).val() // get the current value of the input field.
});

পদ্ধতি 3. টাইমার ( setIntervalবা setTimeout)

আপনার সীমাবদ্ধতাগুলি পেতে keyupআপনি একটি টাইমার সেট করতে পারেন পর্যায়ক্রমে ইনপুটটির মান পরিবর্তন পরিবর্তন নির্ধারণ করতে check আপনি এই টাইমার চেকটি ব্যবহার করতে setIntervalবা করতে পারেন setTimeout। এই এসও প্রশ্নের চিহ্নিত উত্তরটি দেখুন: jQuery টেক্সটবক্স পরিবর্তন ইভেন্ট বা একটি নির্দিষ্ট ইনপুট ক্ষেত্রের জন্য টাইমার শুরু করতে এবং টাইমার শুরু করতে focusএবং blurইভেন্টগুলি ব্যবহার করে কোনও কাজের উদাহরণের জন্য শিখরটি দেখুন


আপনি এই সমাধান সম্পর্কে আরও ব্যাখ্যা করতে পারেন? আমি কীভাবে বর্তমান মূল্য পেতে পারি? বর্তমান মানটিতে পরিবর্তন করা হয় তবে আমি কীভাবে এটি চালাতে পারি?
বনশে

ইনপুট ইভেন্ট? সেখানে jQuery এর (এখনও) ... কোন ইনপুট ঘটনা stackoverflow.com/q/11189136/104380
VSync

পদ্ধতি 2 এর জন্য আমি সাধারণত কীআপ এবং পরিবর্তন উভয়কেই আবদ্ধ করি । যে পরিস্থিতিতে ইনপুটটি কী-চাপবিহীন ঘটে (পাস্ট করার মতো) এমন পরিস্থিতিতে যেমন ইনপুট ফোকাস হারিয়ে ফেললে তা অন্তত ইভেন্টটিকে আগুন ধরিয়ে দেয়।
rspeed

1
@ আদিদারাচি মিউটেশনঅবেসারভার ডিওএম উপাদানগুলিতে পরিবর্তনগুলি ট্র্যাক করবে। তবে, কোনও ইনপুট ক্ষেত্রে ডেটা পরিবর্তন করা কোনও ব্যবহারকারী মিউটেশনঅবার্সার পরিবর্তনটি ট্রিগার করে না ... আমি একটি পরীক্ষার কেস সেটআপ করি, কেবলমাত্র একটি জেএস কোড পরিবর্তন innerTextবা valueঅ্যাট্রিবিউটকে ( সিমুলেটিং ব্যবহারকারী ইনপুট) কোনও মিউটেশনঅবার্সার ইভেন্টকে ট্রিগার করবে jsfiddle.net/pxfunc/ 04chgpws / 1 ( মিউটেশনঅবার্সার ইভেন্ট লগিংয়ের জন্য কনসোল.লগ দেখুন)। আপনার কি অন্যরকম পরীক্ষার কেস আছে যা আমি দেখতে পারি?
মাইকেএম

1
কোনও স্ক্রিপ্টের মান পরিবর্তিত হলে এটি কাজ করে না
ফ্যালকোগার

189

আপনি যদি এইচটিএমএল 5 পেয়ে থাকেন:

  • oninput (পরিবর্তন যখন ঘটে তখনই গুলি চালায় তবে তা তাত্ক্ষণিকভাবে ঘটে)

অন্যথায় আপনাকে এই সমস্ত ইভেন্টের জন্য যাচাই করা দরকার যা ইনপুট উপাদানটির মানটির পরিবর্তন হতে পারে:

  • onchange
  • onkeyup( না keydown বা keypressইনপুট মান এখনো নতুন কীস্ট্রোক থাকবে না হিসাবে)
  • onpaste (যখন সমর্থিত)

এবং হয়ত:

  • onmouseup (আমি এটি সম্পর্কে নিশ্চিত নই)

আমার পরীক্ষা থেকে @ নোমিক এটি চেকবক্স ইনপুটগুলির জন্য কাজ করে; আইই / এজ ব্যতীত। কিছু অন্যান্য ব্যতিক্রম উপস্থিত হতে পারে তবে সেই ইনপুট ধরণের (আইএমএইচও) অনভিজ্ঞ ব্যবহার করা আরও স্মার্ট।
হেলবাবি

82

এইচটিএমএল 5 এবং jQuery ব্যবহার না করে, আপনি inputইভেন্টটি ব্যবহার করতে পারেন :

var input = document.querySelector('input');

input.addEventListener('input', function()
{
    console.log('input changed to: ', input.value);
});

এটি প্রতিবার ইনপুটটির পাঠ্য পরিবর্তিত হবে।

IE9 + এবং অন্যান্য ব্রাউজারগুলিতে সমর্থিত।

এটি এখানে একটি জেএসফিডেলে লাইভ চেষ্টা করুন



1
'পরিবর্তন' কেবল অস্পষ্টভাবে আগুন জ্বলবে, যখন পাঠ্য পরিবর্তন হয়। পাঠ্য পরিবর্তনগুলি সনাক্ত করতে 'ইনপুট' ইভেন্টটি ব্যবহার করুন।
ডার্মোট দোহার্টি

14

অন্যরা ইতিমধ্যে পরামর্শ হিসাবে, আপনার ক্ষেত্রে সমাধানটি হ'ল একাধিক ঘটনা স্নিগ্ধ করা
এই কাজটি করা প্লাগিনগুলি প্রায়শই নিম্নলিখিত ইভেন্টগুলির জন্য শোনেন:

ইনপুট চালু ( 'কীডাউন কীপ্রেস কীআপটি মাউসডাউন ক্লিক করুন মাউসআপ ক্লিক করুন') , হ্যান্ডলার );

যদি আপনি মনে করেন এটি উপযুক্ত হতে পারে তবে আপনি যোগ করতে পারেন focus,blur এবং অন্যান্য ঘটনা খুব।
আমি শুনতে ইভেন্টগুলিকে অতিক্রম না করার পরামর্শ দিই, কারণ এটি ব্যবহারকারীর আচরণ অনুসারে কার্যকর করার জন্য ব্রাউজারের মেমরির আরও প্রক্রিয়া লোড করে।

মনোযোগ দিন: নোট করুন যে জাভাস্ক্রিপ্টের সাথে একটি ইনপুট উপাদানটির মান পরিবর্তন করা (উদাহরণস্বরূপ jQuery .val()পদ্ধতির মাধ্যমে ) উপরের কোনও ঘটনাকে দমন করবে না।
(তথ্যসূত্র: https://api.jquery.com পরিবর্তন / )।


আমি স্বতঃপূরণ নিয়ে সমস্যা এড়াতে ফোকাসআউট যুক্ত করার
পরামর্শও দিই

আমি দেখি. আমি অনুসন্ধান করেছি এবং ফোকাসআউটটি কেবলমাত্র আইআই এবং আংশিকভাবে ক্রোম দ্বারা সমর্থিত বলে মনে হচ্ছে, আমি কি ঠিক আছি?
ইমানুয়েল দেল গ্র্যান্ডে

5
একটি হালকা সংযোজন হিসাবে, jQuery থেকে ইভেন্টটি ফায়ার করার জন্য আপনি সম্পর্কিত ক্রিয়াকে .val()উদাহরণস্বরূপ কল করতে পারেন যেমন কোনও ইনপুট ক্ষেত্রে কোনও পরিবর্তন ইভেন্টের জন্য, আপনি এরকম কিছু করতে চান ... $('#element').val(whatever).change()
টেকনেক্র্যাট

2

যদি আপনি চান যে যখনই উপাদানটির মধ্যে কিছু পরিবর্তন করা হয়েছে তখন ইভেন্টটি বরখাস্ত করা যেতে পারে তবে আপনি কীআপ ইভেন্টটি ব্যবহার করতে পারেন ।


ঠিক আছে তবে এটি কি-ডাউন-এর মতো কম-বেশি একই নয়? আমাকে ইনপুটটি "নোংরা" হয় কিনা তা খতিয়ে দেখতে হবে?
বনশে

@ স্নো জিম আপনি যদি কেবল স্টাফ করতে চান যখন ইনপুটটি আসলে পরিবর্তিত হয়, আপনাকে হয় ব্যবহার করতে হবে onchange, বা নিজেই রাষ্ট্রটিকে ট্র্যাক করতে হবে। keydownকাজ করে না কারণ ইনপুটটির স্থিতি পরিবর্তিত হওয়ার আগেই এটি গুলি চালায় ।
Alnitak

@ অ্যালনিটাক নিখুঁতভাবে এবং কেন আমি এখানে প্রশ্ন জিজ্ঞাসা করছি তা জানায়। মুদ্রাঙ্কনটি কাজ করছে না, কেবলমাত্র ইনপুট ছেড়ে যাওয়ার সময় এটি ফেলে দেওয়া হয়।
বনশে

অবশ্যই ঘরে হাতিটি মোবাইল। খুব নিশ্চিত যে কোনও কীবোর্ড বা মাউস ইভেন্টগুলি সেখানে খুব বেশি কার্যকর হবে না। : পি
আসক ডিজাইনার

@ অ্যাস্কডিজাইনার কীপ / ডাউন ইভেন্টগুলি এখনও মোবাইলে একই ফ্যাশনে কাজ করা উচিত।
জিভিংস

2

উপাদান ফোকাস হারিয়ে ফেললে // .blur ট্রিগার হয়

$('#target').blur(function() {
  alert($(this).val());
});

// ম্যানুয়ালি ব্যবহার ট্রিগার করতে:

$('#target').blur();

1
। পরিবর্তন যেমন হয় আমি কেবল বলেছিলাম যখন ইনআউট ফোকাস হারায় এবং মান পরিবর্তন হয় তখনই আমার ইনপুট (পাঠ্য) পরিবর্তন হওয়ার সাথে সাথেই (ইনপুটের পাঠ্যটি পরিবর্তিত হওয়ার সাথে সাথে) আরও একটি হওয়া দরকার। অস্পষ্টতা কেবল তখনই ট্রিগার করবে যখন ইনপুটটি ফোকাস হারিয়ে ফেলবে।
বনশী

1

মত jQuery এর ঘটনা নেই keyup এবং কীপ্রেস যা আপনি ইনপুট এইচটিএমএল উপাদানের সঙ্গে ব্যবহার করতে পারেন। আপনি অতিরিক্তভাবে অস্পষ্ট () ইভেন্টটি ব্যবহার করতে পারেন ।


1
। পরিবর্তন যেমন হয় আমি কেবল বলেছিলাম যখন ইনআউট ফোকাস হারায় এবং মান পরিবর্তন হয় তখনই আমার ইনপুট (পাঠ্য) পরিবর্তন হওয়ার সাথে সাথেই (ইনপুটের পাঠ্যটি পরিবর্তিত হওয়ার সাথে সাথে) আরও একটি হওয়া দরকার। অস্পষ্টতা কেবল তখনই ট্রিগার করবে যখন ইনপুটটি ফোকাস হারিয়ে ফেলবে।
বনশী

1
কোনও keypressইভেন্টের সময় আপনি নির্ভরযোগ্যভাবে কোনও ইনপুটটির মানটি পরীক্ষা করতে পারবেন না কারণ চাপানো কীটি এখনও সেই মানটি পরিবর্তন করতে পারে না।
Alnitak

0

এটি jQuery 1.7 এবং উপরের ব্যবহার করে একটি ইনপুটে প্রতিটি পরিবর্তনকে কভার করে:

$(".inputElement").on("input", null, null, callbackFunction);
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.