ইনপুট টাইপ হিসাবে "টাইপ" হিসাবে অনেনড ট্র্যাক করার সেরা উপায়?

Question

আমার অভিজ্ঞতা হিসাবে, input type="text" onchangeইভেন্টটি আপনি blurনিয়ন্ত্রণ ( ) ছাড়ার পরে কেবল তখনই ঘটে ।

ব্রাউজারকে onchangeপ্রতিবার textfieldসামগ্রীর পরিবর্তনের জন্য ট্রিগার করতে বাধ্য করার কোনও উপায় আছে কি ? যদি তা না হয় তবে এই "ম্যানুয়ালি" ট্র্যাক করার সর্বাধিক মার্জিত উপায় কোনটি?

onkey*ইভেন্টগুলি ব্যবহার করা নির্ভরযোগ্য নয়, যেহেতু আপনি ক্ষেত্রটিতে ডান ক্লিক করতে পারেন এবং আটকানো চয়ন করতে পারেন এবং এটি কোনও কীবোর্ড ইনপুট ছাড়াই ক্ষেত্রটি পরিবর্তন করবে।

কি setTimeoutএকমাত্র উপায়? .. কুশ্রী :-)

Comments

@ যদি কোনও সুযোগ থাকে যে আপনি নিজের গৃহীত উত্তরটি আপডেট করতে পারেন যাতে পুরানো তারিখটি শীর্ষে পিন না করা হয়?

— ফ্লিম

Answer 1

হালনাগাদ:

আরেকটি উত্তর দেখুন (2015)।

---

আসল ২০০৯ উত্তর:

সুতরাং, আপনি onchangeকীডাউন, ব্লার এবং পেস্টের মাধ্যমে ইভেন্টটি চালিত করতে চান ? এটা যাদু।

পরিবর্তনগুলি টাইপ করার সাথে সাথে যদি তারা ট্র্যাক করতে চান তবে ব্যবহার করুন "onkeydown"। আপনার যদি মাউসের সাহায্যে পেস্ট অপারেশনগুলি ফাঁদে ফেলতে হয় তবে "onpaste"( আইই , এফএফ 3 ) এবং "oninput"( এফএফ, অপেরা, ক্রোম, সাফারি ¹ ) ব্যবহার করুন।

¹ _{সাফারিতে ব্রোকেন <textarea>। textInputপরিবর্তে ব্যবহার করুন}

Comments

onkeypressপরিবর্তে ব্যবহার করা উচিত onkeydown। onkeydownএকটি চাবি নিচে ক্লিক করা হয় আগুন। যদি কোনও ব্যবহারকারী কোনও কী ধরে রাখে তবে ইভেন্টটি প্রথম চরিত্রটির জন্য কেবল একবারেই জ্বলতে থাকবে। onkeypressপাঠ্য ক্ষেত্রে যখনই একটি চর যোগ করা হয় তখন আগুন লাগে s

— fent

onchangeএই সমস্ত ক্রিয়ায় আগুন লাগানো মোটেই যাদু নয় । <input onchange="doSomething();" onkeypress="this.onchange();" onpaste="this.onchange();" oninput="this.onchange();">বেশিরভাগের জন্য যথেষ্ট ভাল করবে

— আরথ

মাউস ব্যবহার করে ইনপুট বাক্সে কিছু পাঠ্য মোছার বিষয়ে কী? আমি মনে করি না এটি কাজ করবে।

— জীবন

Jquery 1.8.3 সহ, দেখতে দেখতে:$().on('change keydown paste input', function() {})

— নারফানিয়েটর

@ আরিওয়াইস: হ্যাঁ, ওম, বেশিরভাগ SO অবমূল্যায়ন করা উচিত। ভাবেন এই উত্তরটি 8 বছরের পুরানো । আমি আশা করি যে এটির মতো পুরানো উত্তরের জন্য একটি "অবচয়" বোতামটি ছিল এবং সম্প্রদায় আরও ভাল এটি চয়ন করতে পারে।

— ক্রিসেন্ট ফ্রেশ

Answer 2

আজকাল শুনুন oninput। এটি onchangeউপাদানটির উপর ফোকাস হারানোর প্রয়োজন ছাড়া মনে হয় । এটি এইচটিএমএল 5।

এটি IE8 এবং নীচে বাদে সবাই (এমনকি মোবাইল) দ্বারা সমর্থিত। আইই জন্য অ্যাড onpropertychange। আমি এটি এর মতো ব্যবহার করি:

const source = document.getElementById('source');
const result = document.getElementById('result');

const inputHandler = function(e) {
  result.innerHTML = e.target.value;
}

source.addEventListener('input', inputHandler);
source.addEventListener('propertychange', inputHandler); // for IE8
// Firefox/Edge18-/IE9+ don’t fire on <select><option>
// source.addEventListener('change', inputHandler); 

<input id="source">
<div id="result"></div>

Comments

ওয়েব স্ট্যান্ডার্ডের মতো চির পরিবর্তিত বিশ্বে, কখনও কখনও গ্রহণযোগ্য উত্তরগুলি কয়েক বছর পরে পরিবর্তন করা যেতে পারে ... এটি আমার কাছে নতুন গৃহীত উত্তর।

— এরিক পেট্রুসেলি

oninputএমনকি আই 9 এর জন্য সমর্থন আংশিক হলেও ( ক্যানিউজ . com / #feat=input-event )।

— কেনস্টন চোই

কোনও innerTextজায়গায় innerHTMLযাতে মার্কআপ রেন্ডার না হয় সেজন্য এটি ব্যবহার করা সার্থক হতে পারে

— জীবন তখর

Answer 3

নীচে কোড আমার সাথে জ্যাকুয়েরি 1.8.3 দিয়ে কাজ করে

এইচটিএমএল: <input type="text" id="myId" />

জাভাস্ক্রিপ্ট / jQuery:

$("#myId").on('change keydown paste input', function(){
      doSomething();
});

Comments

JQuery লাইব্রেরি প্রশ্নে ট্যাগ করা হয় না।

— জন ওয়েইজ

জ্যাকুরি একটি জাভাস্ক্রিপ্ট এপিআই, এবং আমি এখানে জ্যাকুরি কীওয়ার্ড দিয়ে অনুসন্ধান করে নিয়ে এসেছি, আমি মনে করি না যে জ্যাকুয়ের উত্তরের জন্য প্রতিটি জাভাস্ক্রিপ্টের বিচারের জন্য একটি নতুন প্রশ্ন তৈরি করা উপযুক্ত ...

— গ্যাল্যাডেভ

লোকেরা যদি উত্তরগুলিতে গ্রন্থাগার ব্যবহারের পরামর্শ না দেয় তবে এসও

— ডায়েটব্যাকন

একাধিকবার গুলি চালায়। সম্ভবত পরিবর্তন এবং কীডাউন এর কারণে। সম্ভবত এখানে ইনপুট প্রয়োজন।

— মিমি

আপনার দরকার নেই keydownকারণ এটি ইনপুটটির মানটি নকল করবে, এটি সরিয়ে ফেলবে।

— ইউসুফ আল সুবাইহি

Answer 4

জাভাস্ক্রিপ্ট এখানে অনির্দেশ্য এবং মজার।

• onchange আপনি যখন পাঠ্যবক্সটি অস্পষ্ট করেন তখনই ঘটে
• onkeyup& onkeypressসর্বদা পাঠ্য পরিবর্তনে ঘটে না
• onkeydown পাঠ্য পরিবর্তনে ঘটে (তবে মাউস ক্লিকের সাহায্যে কাটা ও পেস্ট করা যায় না)
• onpaste& oncutকিপ্রেস এবং এমনকি মাউসের ডান ক্লিক সহ ঘটে।

সুতরাং, পাঠ্যবাক্স পরিবর্তন ট্র্যাক করতে, আমরা প্রয়োজন onkeydown, oncutএবং onpaste। এই ইভেন্টের কলব্যাকে, আপনি যদি পাঠ্যবক্সের মানটি পরীক্ষা করেন তবে কলব্যাকের পরে মান পরিবর্তিত হওয়ায় আপনি আপডেট হওয়া মানটি পাবেন না। সুতরাং এর সমাধানটি হ'ল পরিবর্তনটি ট্র্যাক করার জন্য 50 মিলি-সেকেন্ডের টাইমআউট (বা কম হতে পারে) সহ একটি টাইমআউট ফাংশন সেট করা।

এটি একটি নোংরা হ্যাক তবে এটিই একমাত্র উপায়, আমি যেমন গবেষণা করেছি।

এখানে একটি উদাহরণ। http://jsfiddle.net/2BfGC/12/

Comments

oninputএবং textInputইভেন্টগুলি যা এর আসল সমাধান তবে এটি সমস্ত ব্রাউজার দ্বারা সমর্থিত নয়।

— সংকেত সাহু

দ্বিতীয় বুলেট পয়েন্টের জন্য আমি ধরে নিচ্ছি যে আপনি বোঝাতে চেয়েছিলেন onkeyupএবং onkeydown, যা একই রকম। উভয়ই সিটিআরএল, আল্ট, শিফট এবং মেটা কীগুলি ক্যাপচার করতে পারে। তৃতীয় বুলেট পয়েন্টের জন্য আমি ধরে নিচ্ছি আপনি বোঝাতে চেয়েছিলেন onkeypress।

— ড্যানিয়েল স্টিভেন্স

Answer 5

onkeyupআপনি টাইপ করার পরে ঘটে উদাহরণস্বরূপ আমি টিপুন tযখন আমি আঙুলটি তুলি তখন ক্রিয়া ঘটে তবে keydownআমি অক্ষরটি অঙ্ক করার আগে অ্যাকশনে ঘটেt

আশা করি এটি কারও জন্য সহায়ক।

আপনি onkeyupএখন যা টাইপ করেছেন তা যখন পাঠাতে চান তার জন্য ভাল।

Answer 6

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

[আপডেট] এইচটিএমএল 5 বা তারপরে, oninputউপরের অন্যান্য উত্তরে বর্ণিত হিসাবে রিয়েল টাইম চরিত্র পরিবর্তন সংক্রান্ত আপডেটগুলি পেতে ব্যবহার করুন ।

Comments

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

— hkasera

@ hkasera হ্যাঁ, এইচটিএমএল 5 oninputদিয়ে যাওয়ার উপায়। তবে, যখন আমি প্রয়োগ করি তখন এইচটিএমএল 5 এর অস্তিত্ব ছিল না এবং আমরা IE 8 :( ছিলাম। এটি আপনার আপডেটের প্রশংসা করি কারণ এটি ব্যবহারকারীদের জন্য আপ-টু-ডেট তথ্য সরবরাহ করে

— মোহনিশ

Answer 7

আমি মনে করি 2018 এ inputইভেন্টটি ব্যবহার করা আরও ভাল ।

-

WHATWG স্পেস বর্ণনা করার সাথে সাথে ( https://html.spec.whatwg.org/m মাল্টিপেজ/indices.html#event-input-input ):

যখন ব্যবহারকারী মান পরিবর্তন করেন তখন নিয়ন্ত্রণে ফায়ার ( পরিবর্তন ইভেন্টটিও দেখুন )

-

এটি কীভাবে ব্যবহার করা যায় তার একটি উদাহরণ এখানে:

<input type="text" oninput="handleValueChange()">

Answer 8

আপনি যদি কেবলমাত্র ইন্টারনেট এক্সপ্লোরার ব্যবহার করেন তবে আপনি এটি ব্যবহার করতে পারেন:

<input type="text" id="myID" onpropertychange="TextChange(this)" />

<script type="text/javascript">
    function TextChange(tBox) {
        if(event.propertyName=='value') {
            //your code here
        }
    }
</script>

আশা করি এইটি কাজ করবে.

Comments

কোনও গৃহ-প্রকল্পের জন্য আমার ধারণা হতে পারে ... :)

— eselk

Godশ্বরকে ধন্যবাদ আমি সেই বাড়িতে থাকি না! : ডি

— মার্কো মাতারাজ্জি

10 বছর আগে এই বাক্যে মজাদার কিছুই থাকবে না .. :(

— মাইচা তাবোর

আমার জন্য এটি সাহায্য করে, আমি এম্বেড থাকা ওএস সহ কয়েকটি মোবাইলের জন্য একটি প্রকল্প বিকাশ করছি যেখানে কেবলমাত্র একমাত্র ব্রাউজার।

— অ্যান্ডার্স এম

আপনি যদি কেবলমাত্র ইন্টারনেট এক্সপ্লোরার ব্যবহার করেন - LOL। 2016 সালে আমার দিন তৈরি!

— জ্যাক ব্ল্যাক

Answer 9

একটি খুব কাছাকাছি সমাধান আছে (সমস্ত আটকানো উপায় ঠিক করবেন না) তবে তাদের বেশিরভাগ:

এটি ইনপুটগুলির পাশাপাশি টেক্সারিয়াসের জন্যও কাজ করে:

<input type="text" ... >
<textarea ... >...</textarea>

এটি করুন:

<input type="text" ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >
<textarea ... onkeyup="JavaScript: ControlChanges()" onmouseup="JavaScript: ControlChanges()" >...</textarea>

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

তবে বেশিরভাগ আটকানো উপায় কী-বোর্ড এবং / বা মাউস দিয়ে করা হয়, তাই সাধারণত একটি অনস্কিপ বা অনমাউসআপ একটি পেস্টের পরে নিক্ষেপ করা হয়, কীবোর্ডে টাইপ করার সময় অনকিআপও নিক্ষেপ করা হয়।

আপনার চেক কোডটি খুব বেশি সময় নেয় না তা নিশ্চিত করুন ... অন্যথায় ব্যবহারকারী দুর্বল ইমপ্রেশন পান।

হ্যাঁ, কৌশলটি চাবি এবং মাউসে গুলি চালানো ... তবে সাবধান থাকুন উভয়কেই বরখাস্ত করা যেতে পারে, তাই মনে রাখবেন এরকম !!!

Answer 10

দয়া করে, JQuery ব্যবহার করে পরবর্তী পদ্ধতির বিচার করুন:

এইচটিএমএল:

<input type="text" id="inputId" />

জাভাস্ক্রিপ্ট (JQuery):

$("#inputId").keyup(function(){
        $("#inputId").blur();
        $("#inputId").focus();
});

$("#inputId").change(function(){
        //do whatever you need to do on actual change of the value of the input field
});

Comments

আমি একইভাবে ব্যবহার করি:)

— খালেদ দেহিয়া

আমি বুঝতে পেরেছি এটি কোনও নতুন উত্তর নয়, তবে প্রতিটি কীআপের ইনপুটটি ঝাপসা করে এবং পুনরায় ফোকাস করবে না যদি এটি ইনপুটটির শেষ ব্যতীত অন্য কোথাও থাকে তবে কার্সার প্লেসমেন্টটি স্ক্রু আপ করবে?

— মাইকেল মার্টিন-স্মুকার

@ মাইকেলমার্টিন-স্মুকার আপনি এমনটি ভাবতেন

— ক্লোনকেক্স

Answer 11

"ইনপুট" আমার পক্ষে কাজ করেছিল।

var searchBar  = document.getElementById("searchBar");
searchBar.addEventListener("input", PredictSearch, false);

Answer 12

আপনি ব্যবহার করতে পারে keydown, keyupএবং keypressপাশাপাশি ইভেন্ট নেই।

Answer 13

প্রতিটি ট্র্যাক করার জন্য এই উদাহরণটি চেষ্টা করুন এবং তার আগে সম্পূর্ণরূপে কার্সার পলক হার শূন্যে হ্রাস করুন।

<body>
//try onkeydown,onkeyup,onkeypress
<input type="text" onkeypress="myFunction(this.value)">
<span> </span>
<script>
function myFunction(val) {
//alert(val);
var mySpan = document.getElementsByTagName("span")[0].innerHTML;
mySpan += val+"<br>";
document.getElementsByTagName("span")[0].innerHTML = mySpan;
}
</script>

</body>

onblur: প্রস্থানটি ইভেন্ট উত্পন্ন করে

অনচেঞ্জ: ইনপুটেক্সটে কোনও পরিবর্তন করা হলে প্রস্থান থেকে ইভেন্ট উত্পন্ন হয়

অনকিডাউন: যে কোনও কী প্রেসে ইভেন্ট উত্পন্ন হয় (দীর্ঘ সময় ধরে কী ধরে রাখার জন্যও)

অনকিআপ: ইভেন্টটি কোনও কী রিলিজে উত্পন্ন করে

অ্যানকিপ্রেস: অনকিডাউন (বা অনকিআপ) সমান তবে সিটিআরএল, ব্যাকসেস, অন্য কোনও ক্ষেত্রে প্রতিক্রিয়া জানায় না

Answer 14

2018 এখানে, আমি এটিই করি:

$(inputs).on('change keydown paste input propertychange click keyup blur',handler);

আপনি যদি এই পদ্ধতির ত্রুটিগুলি চিহ্নিত করতে পারেন তবে আমি কৃতজ্ঞ হব।

Comments

2019 এখানে, এবং এটি প্রতিটি কীপ্রেসের জন্য একাধিকবার আগুন জ্বালাবে। উদাহরণস্বরূপ, এখানে দেখুন: jsfiddle.net/sp00n82/3r4691tq/5

— sp00n

Answer 15

পদ্ধতি 1: এর জন্য ইভেন্ট শ্রোতা যুক্ত করুন input:

element.addEventListener("input", myFunction);

 

পদ্ধতি 2:oninput জাভাস্ক্রিপ্ট সহ সম্পত্তি নির্ধারণ করুন :

element.oninput = function()
{
    myFunction();
};

 

পদ্ধতি 3:oninput এইচটিএমএল সহ সম্পত্তি নির্ধারণ করুন :

<input type="text" oninput="myFunction();">

Answer 16

রবার্ট সিমার অ্যাডএভেন্টলিস্টনার আইই 8 তে সমর্থিত নয়।

"আইই এর পুরানো সংস্করণগুলি একটি সমতুল্য, মালিকানাধীন ইভেন্টট্যাজেট.এটাচ এভেন্ট () পদ্ধতি সমর্থন করে supported" https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener

Comments

এটি একটি নতুন উত্তরের চেয়ে বিদ্যমান উত্তরের একটি মন্তব্যের মতো

— slpan