পরিবর্তিত ইনপুট পাঠ্য বাক্স সনাক্ত করুন

Question

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

$('#inputDatabaseName').change(function () { 
    alert('test'); 
});

<input id="inputDatabaseName">

Comments

চেষ্টা করার জন্য কেবল কয়েকটি জিনিস: ইনপুটটিকে একটি প্রকার = "পাঠ্য" দিন এবং এটিকে একটি সিঙ্গলটন উপাদান করুন। <ইনপুট আইডি = "ইনপুট ডেটাবেসনেম" টাইপ = "পাঠ্য" />

— স্যেলিগা

মাত্র 7 বছর দেরি করে কিছু অপ্রয়োজনীয় কোড সাফ করেছে।

— ডেভিলের অ্যাডভোকেট

Answer 1

আপনি inputজাভাস্ক্রিপ্ট ইভেন্টটি jQuery এ এর ​​মতো ব্যবহার করতে পারেন :

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

খাঁটি জাভাস্ক্রিপ্টে:

document.querySelector("input").addEventListener("change",function () {
  alert("Input Changed");
})

বা এই মত:

<input id="inputDatabaseName" onchange="youFunction();"
onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();"/>

Comments

এই ইভেন্টের জন্য নথিপত্র খুঁজে পাওয়া যায় না বলে মনে হয় না, তবে এটি যেমনটি প্রত্যাশা করেছিলাম ঠিক তেমনভাবে কাজ করে। আমি ডক পৃষ্ঠাটি কোথায় খুঁজে পাব?

— জর্জি পেড্রেট

আপনি এটি এইচটিএমএল 5 ইভেন্টের তালিকায় খুঁজে পেতে পারেন: w3schools.com/tags/ref_eventattributes.asp বা এখানে help.dottoro.com/ljhxklln.php

— Ouadie

এই সমাধানটি কী-আপ ব্যবহারের চেয়ে অনেক ভাল। উদাহরণস্বরূপ আইই ব্যবহারকারীকে এক্স ক্লিক করে ইনপুট ক্ষেত্রটি সাফ করতে দেয় যা কী-আপটি ট্রিগার করে না।

— জর্জি

নিকটতম সমাধান এখন পর্যন্ত, তবে ব্রাউজার যখন পাঠ্য বাক্সগুলিতে স্বতঃপূরণ সম্পাদন করে তখনও কাজ করে না।

— সৌমিল

এটি প্রথম উত্তরের চেয়ে অনেক ভাল। সিআরটিএল, শিফট কীগুলি সমস্ত কী-আপ হিসাবে গণনা করা হয়। এবং সবচেয়ে খারাপ দিকটি হ'ল, যদি আপনি দ্রুত টাইপ করেন তবে বেশ কয়েকটি ইনপুট কেবলমাত্র একটি কীআপ ইভেন্ট হিসাবে নিবন্ধিত হবে।

— অক্টরেফ 16

Answer 2

পরিবর্তনের পরিবর্তে কীআপ চেষ্টা করুন।

<script type="text/javascript">
   $(document).ready(function () {
       $('#inputDatabaseName').keyup(function () { alert('test'); });
   });
</script>

.Keyup () এর জন্য সরকারী jQuery ডকুমেন্টেশন এখানে ।

Comments

দীর্ঘশ্বাস ত্যাগ করে আমি চেষ্টা করেছিলাম (এই প্রশ্নটি দেখার পরে: stackoverflow.com/questions/1443292/… ) ... তবে সম্ভবত এটি এখন কাজ করে না বলে!

— শয়তানের অ্যাডভোকেট

যখন উপাদানটি ফোকাসটি হারাতে পারে এবং কীবোর্ড থেকে একটি কী প্রকাশিত হয় তখন কীআপ বরখাস্ত হয় কেবল তখনই আগুনের পরিবর্তন ঘটে change

— ডিক্লান কুক

ব্যবহারকারী যদি সিআরটিএল + ভি ব্যবহার করে বা # ইনপুটডেটাবেসনেমে মাউসের সাহায্যে একটি নির্বাচিত পাঠ্য টেনে নিয়ে কোডটি আটকান? আপনি কীভাবে এটি সনাক্ত করতে পারেন?

— রাদু সিমিনেস্কু

এটির মূল সমস্যাটি হ'ল বিষয়বস্তুটি আসলে পরিবর্তিত হয় তা এখনও বিবেচনায় নেয় না। কেবলমাত্র একটি বোতাম চাপানো হয়েছিল

— মেট্রোপলিস

@ মেট্রোপলিস, আপনি আমার উত্তরটি দেখেছেন ?? stackoverflow.com/a/23266812/3160597

— azerafati

Answer 3

প্রতিটি উত্তরের কিছু পয়েন্ট অনুপস্থিত, সুতরাং আমার সমাধানটি এখানে:

$("#input").on("input", function(e) {
  var input = $(this);
  var val = input.val();

  if (input.data("lastval") != val) {
    input.data("lastval", val);

    //your change action goes here 
    console.log(val);
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">
<p>Try to drag the letters and copy paste</p>

Input Eventউপর আগুন কীবোর্ড ইনপুট, মাউস টেনে আনুন , স্বতঃপূর্ণ এবং কপি পেস্ট-এর Chrome এবং ফায়ারফক্স উপর পরীক্ষা। পূর্ববর্তী মানটির জন্য অনুসন্ধান করা এটি সত্যিকারের পরিবর্তনগুলি সনাক্ত করে, যার অর্থ একই জিনিসটি আটকানোর সময় বা একই চরিত্রটি টাইপ করার সময় গুলি চালানো হয় না ইত্যাদি etc.

কার্যকারী উদাহরণ: http://jsfiddle.net/g6pcp/473/

---

হালনাগাদ:

এবং আপনি যদি change function কেবল তখনই চালনা করতে চান যখন ব্যবহারকারী টাইপিং শেষ করে এবং পরিবর্তনটির ক্রিয়াকলাপটি কয়েকবার বন্ধ করতে প্রতিরোধ করে, আপনি এটি ব্যবহার করতে পারেন:

var timerid;
$("#input").on("input", function(e) {
  var value = $(this).val();
  if ($(this).data("lastval") != value) {

    $(this).data("lastval", value);
    clearTimeout(timerid);

    timerid = setTimeout(function() {
      //your change action goes here 
      console.log(value);
    }, 500);
  };
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="input">

যদি ব্যবহারকারী টাইপ করা শুরু করে (উদাঃ "ফুবার") এই কোডটি আপনার change actionপ্রতিটি অক্ষরের ব্যবহারকারীর জন্য চালনা করতে বাধা দেয় এবং কেবল যখন ব্যবহারকারী টাইপ করা বন্ধ করে দেয় তখন এটি বিশেষত যখন আপনি সার্ভারে ইনপুট প্রেরণ করেন (বিশেষত অনুসন্ধানের ইনপুট), তখন এটির জন্য বিশেষত ভাল পথ সার্ভার আছে শুধুমাত্র একটি জন্য অনুসন্ধান foobarএবং জন্য না ছয় অনুসন্ধান fএবং তারপর foএবং তারপর fooএবং foobইত্যাদি।

Comments

প্রায় 6 টির মধ্যে এটিই আমি চেষ্টা করেছিলাম। অসাধারণ. ধন্যবাদ।

— এনকোড

আইই 9-তে প্রায় কাজ করে: আপনি যদি একটি চরিত্র মুছে ফেলেন তবে এটি ইভেন্টটিকে আগুন দেয় না। যদিও খুব ভালো কাজ হয়েছে

— সোমমা

@ সোমা, অন্যরা যেমন বলে যে "আইই ভাঙা এটি ত্রুটি নয় এটি একটি বৈশিষ্ট্য";) যদিও আইই আর চালিয়ে দেওয়া হয় না তবে এর জন্য যদি আপনার কোনও স্থির থাকে তবে আমাদের জানান

— আজেফরাতি

আমি জানি, তবে কাজের জন্য আমাকে এটি করতে হয়েছিল :( আসলে, আমি এটি করি: $("#input").focusout(function () {})আপনি যখন আপনার ইনপুটটির বাইরে ক্লিক করেন, ইভেন্টটি বরখাস্ত করা হয় Chrome ক্রোম এবং ফায়ারফক্সের বর্তমান সংস্করণ এবং আই 99

— সোমা

@ সোমা, যদি আইই এর কাজ করার একমাত্র উপায় হয় তবে আপনি কেবল এই লাইনটি পরিবর্তন করে এটি আমার উপায়ে ব্যবহার করতে পারবেন$("#input").on("input focusout",function(e){

— আজরাফতী

Answer 4

পাঠ্য ইনপুটগুলি changeফোকাস হারা না হওয়া পর্যন্ত ইভেন্টটি চালিত করে না । ইনপুটটির বাইরে ক্লিক করুন এবং সতর্কতা প্রদর্শিত হবে।

পাঠ্য ইনপুটটির ফোকাস হারানোর আগে যদি কলব্যাকটি চালিত হয় তবে .keyup()ইভেন্টটি ব্যবহার করুন ।

Comments

changeএখানে কাজ করছে: jsfiddle.net/g6pcp ; keyupপ্রতিটি কী

— টির

@diEcho আমি মনে করি সতর্কতা তার কোডটি কাজ করানোর জন্য একটি উদাহরণ মাত্র ... শেষ পর্যন্ত তার কী ইচ্ছা তা নয়।

— স্কট হারওয়েল

@diEcho স্কট যা বলেছিল তা কেবল পরীক্ষার উদ্দেশ্যেই হয়েছিল। আমি এভাবেই ডিবাগ করব: ডি

— ডেভিলের অ্যাডভোকেট

@ স্কট দয়া করে পরিবর্তে একটি উপযুক্ত ডিবাগার ব্যবহার করুন দয়া করে alert()। এটি ডিবাগিংকে এত সহজ করে তুলবে।

— ম্যাট বল

Answer 5

onkeyup, onpaste, onchange, oninputযখন ব্রাউজারটি পাঠ্যবক্সগুলিতে স্বতঃপূরণ সম্পাদন করে ব্যর্থ হয় বলে মনে হচ্ছে। autocomplete='off'ব্রাউজারটিকে পাঠ্যবক্সটি স্বয়ংক্রিয়ভাবে পূরণ করা থেকে বিরত রাখতে আপনার পাঠ্যক্ষেত্রের মধ্যে " " অন্তর্ভুক্ত করে এমন কেস পরিচালনা করতে ,

যেমন,

<input id="inputDatabaseName" autocomplete='off' onchange="check();"
 onkeyup="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();" />

<script>
     function check(){
          alert("Input box changed");
          // Things to do when the textbox changes
     }
</script>

Answer 6

আমার ক্ষেত্রে, আমার কাছে একটি পাঠ্যবাক্স ছিল যা ডেটপিকারের সাথে সংযুক্ত ছিল। আমার পক্ষে কাজ করা একমাত্র সমাধান হ'ল ডেটপিকারের অন-নির্বাচন ইভেন্টের মধ্যে এটি হ্যান্ডেল করা।

<input type="text"  id="bookdate">

$("#bookdate").datepicker({            
     onSelect: function (selected) {
         //handle change event here
     }
});

Answer 7

আমি মনে করি keydownআপনিও এটি ব্যবহার করতে পারেন :

$('#fieldID').on('keydown', function (e) {
  //console.log(e.which);
  if (e.which === 8) {
    //do something when pressing delete
    return true;
  } else {
    //do something else
    return false;
  }
});

Answer 8

কাজ:

$("#ContentPlaceHolder1_txtNombre").keyup(function () {
    var txt = $(this).val();
        $('.column').each(function () {
            $(this).show();
            if ($(this).text().toUpperCase().indexOf(txt.toUpperCase()) == -1) {
                $(this).hide();
            }
        });
    //}
});

Comments

এটি একটি ভিন্ন প্রশ্নের কোডের মতো দেখায় ... বড় হাতের মান এবং কন্টেন্ট প্রদর্শন / লুকিয়ে রাখার বিষয়ে সেই জিনিসটি কী?

— নিকো হাজেস