jQuery কিপ্রেসের পরে ইনপুট মান পান

Question

আমি নিম্নলিখিত ফাংশন আছে:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

কোনও কারণে, প্রথম কিপ্রেসের জন্য, আমি কনসোল লগের একটি খালি স্ট্রিং পাচ্ছি।

Answer 1

এটি কারণ keypressকারণগুলির উপাদানগুলিতে নতুন চরিত্রটি যুক্ত হওয়ার আগে ইভেন্টগুলি গুলি করা হয় value(সুতরাং keypressপ্রথম চরিত্রটি যুক্ত হওয়ার আগে প্রথম ইভেন্টটি গুলি করা হয়, যদিও এটি valueখালি রয়েছে)। keyupপরিবর্তে আপনার ব্যবহার করা উচিত , যা চরিত্রটি যুক্ত হওয়ার পরে বরখাস্ত করা হয়।

মনে রাখবেন, যদি আপনার উপাদানটি #dSuggestএকই রকম হয় তবে input:text[name=dSuggest]আপনি এই কোডটি যথেষ্ট পরিমাণে সরল করতে পারেন (এবং যদি তা না হয় তবে, এমন একটি উপাদানের সাথে কোনও নাম রয়েছে যা idঅন্য উপাদানের মতো হয় তবে এটি ভাল ধারণা নয়)।

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

Comments

কাজ করে তবে jquery 2.x এর সাথে এখনই পুরানো হয়েছে কারণ নীচের উত্তরটি অন এবং ইনপুট ব্যবহার করা এখনই এটি করার সর্বোত্তম উপায়।

— পাইটর কুলা

@ পিপমকিন: যেহেতু jQuery 2 আউট হয়েছে, এর অর্থ এই নয় যে লোকেরা IE8 এবং তার চেয়ে কম সমর্থন করে না। এবং আমি দস্তাবেজে এমন কিছু দেখতে পাচ্ছি না যা inputইভেন্টের ধরণের জন্য প্রকৃত সহায়তার পরামর্শ দেয় ।

— কুকি দৈত্য

আপনি সংশোধন করুন, তাদের উচিত IE, পয়েন্ট সমর্থন করা বন্ধ করা উচিত। JQuery 1.x এর বেশিরভাগ "ওয়ার্কআরাউন্ডস" আইই এর জন্য, তাই এটি সত্যই jQuerIE নামকরণ করা উচিত।

— পাইটর কুলা

Answer 2

এটি যে একটি পুরানো পোস্ট তা বুঝতে পেরে আমি একই সমস্যার সাথে লড়াই করে যাচ্ছি তাই আমি একটি উত্তর সরবরাহ করব।

"input"পরিবর্তে আপনার ইভেন্টটি ব্যবহার করা উচিত এবং .onপদ্ধতিটি দিয়ে নিবন্ধ করুন । এটি দ্রুত - ল্যাগ ছাড়াই keyupএবং আপনার বিবরণটি হারিয়ে যাওয়া সর্বশেষ কিপ্রেস সমস্যাটি সমাধান করে।

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

এখানে ডেমো

Comments

এটি একটি যথাযথ উত্তর হিসাবে চিহ্নিত করা উচিত - কীআপটি অনুপস্থিত চরিত্রের সমস্যাটি সমাধান করে তবে চরিত্রটি আসলে লেখা হয়েছিল কিনা তা নির্ধারণ করতে সমস্যাযুক্ত (এবং কীটি উদাহরণস্বরূপ "ট্যাব" বা "হোম" নয়)। আপনার জন্য +1

— নাশি

সমস্যাটি হ'ল এটি পুরানো ব্রাউজারগুলিতে সমর্থিত নয় এবং আইআই 9 মুছে ফেলা অক্ষরগুলিতে সাড়া দেয় না।

— ফোনিক্স

Answer 3

.keyupকিপ্রেসের পরিবর্তে ব্যবহার করুন ।

বর্তমান ইনপুট মান অ্যাক্সেস করতে এছাড়াও ব্যবহার করুন $(this).val()বা কেবল this.value।

এখানে ডেমো

.keypressJQuery ডক্স থেকে সম্পর্কিত তথ্য ,

যখন ব্রাউজারটি কীবোর্ড ইনপুট নিবন্ধন করে তখন কী-চাপড়ির ইভেন্টটি কোনও উপাদানকে পাঠানো হয়। কী পুনরাবৃত্তিগুলির ক্ষেত্রে বাদে এটি কীডাউন ইভেন্টের মতো। যদি ব্যবহারকারী কোনও কী টিপে ধরে এবং ধরে রাখে তবে কী-ডাউন ইভেন্টটি একবার ট্রিগার করা হয় তবে প্রতিটি inোকানো চরিত্রের জন্য পৃথক কী-চাপ ইভেন্টগুলি ট্রিগার করা হয়। তদাতিরিক্ত, সংশোধক কীগুলি (যেমন শিফট) কী-ডাউন ইভেন্টগুলি ট্রিগার করে তবে কিপ্রেস ইভেন্টগুলি নয়।

Comments

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

— vsync

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

— vsync

Answer 4

ইনপুটটি আপডেট করার জন্য আপনাকে এক্সিকিউশন থ্রেডে বাধা দিতে হবে।

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

Comments

keyupকিছু উদ্দেশ্যে দেরি করা খুব ধীর এবং স্বতঃ-ফিল্টার সংশোধক কীগুলিও ব্যবহার করে না। এটি আসলে আমার পক্ষে আরও ভাল কাজ করে।

— অ্যালবার্ট বোরি

সর্বোত্তম উত্তর. কীআপ - ধীর এবং দুটি কী টিপে @ এর মতো অক্ষর ধরতে পারে না।

— রোমা রাশ

Answer 5

কারণ Keypressনতুন চরিত্রটি যুক্ত হওয়ার আগে ইভেন্টটি বহিস্কার করা হয়। পরিবর্তে 'কীআপ' ইভেন্টটি ব্যবহার করুন, যা আপনার পরিস্থিতিতে নিখুঁতভাবে কাজ করবে।

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

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

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

আপনাকে প্রতিটি পাঠ্যবক্সে আইডি দিয়ে কীআপ ইভেন্ট প্রয়োগ করতে হবে না বলে এটি আপনার কোডকে অনেকাংশে হ্রাস করবে।

Answer 6

আমি একটি ES6 উদাহরণ খুঁজছিলাম (যাতে এটি আমার লিটারটি পেরিয়ে যেতে পারে) সুতরাং অন্যান্য লোকদের জন্য যারা এটি সন্ধান করছে:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

আমি কীআপটিও ব্যবহার করব কারণ আপনি যে মানটি পূরণ করেছেন তা পেয়ে যান।

Answer 7

আপনার কল করার জন্য কেবল একটি সময়সীমা ব্যবহার করুন; ইভেন্ট স্ট্যাক শেষ হয়ে গেলে টাইমআউট কল করা হবে (যেমন ডিফল্ট ইভেন্ট বলার পরে)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

Answer 8

আমি মনে করি আপনার যা প্রয়োজন তা হ'ল নীচের প্রোটোটাইপ

$(element).on('input',function(){code})

Answer 9

jQuery কিপ্রেসের পরে ইনপুট মান পান

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
}); 

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>