জাভাস্ক্রিপ্ট শ্রোতা, "কীপ্রেস" ব্যাকস্পেস সনাক্ত করে না?


141

আমি keypressশ্রোতা যেমন ব্যবহার করছি ..

addEventListener("keypress", function(event){

}

যাইহোক, এটি কোনও ব্যাকস্পেস সনাক্ত করেছে যা পাঠ্য মুছে দেয় ...

এটি সনাক্ত করতে আমি কি অন্যরকম শ্রোতা ব্যবহার করতে পারি?

উত্তর:


167

কী টেপার ঘটনা শুধুমাত্র অক্ষরের জন্য প্রার্থনা করা হয় (মুদ্রণযোগ্য) কি, keydown ঘটনা সব সহ অমুদ্রণযোগ্য যেমন জন্য উত্থাপিত হয় Control, Shift, Alt, BackSpace, ইত্যাদি

হালনাগাদ:

কী টিপে চাপলে কিপ্রেস ইভেন্টটি বহিস্কার হয় এবং সেই কীটি সাধারণত একটি চরিত্রের মান তৈরি করে

রেফারেন্স


3
কঠোরভাবে সত্য নয়: অনেকগুলি মুদ্রণযোগ্য কীগুলি keypressঅনেকগুলি ব্রাউজারগুলিতে ঘটায় fire দেখুন unixpapa.com/js/key.html
টিম নিচে

মজিলার বর্তমান সংস্করণে ব্যাকস্পেস এবং সমস্ত কিপ্রেস ইভেন্টে সনাক্ত হয়েছে।
ইনিরাভপেটেল

70

keydownপরিবর্তে চেষ্টা করুন keypress

কীবোর্ড ঘটনা এই আদেশ ঘটতে: keydown, keyup,keypress

ব্যাকস্পেসের সমস্যাটি সম্ভবত, ব্রাউজারটি আবার নেভিগেট করবে keyupএবং এইভাবে আপনার পৃষ্ঠাটি keypressইভেন্টটি দেখতে পাবে না ।


আমি মানদণ্ডগুলিতে সন্ধান করিনি, তবে ইভেন্টের অর্ডার (ফায়ারফক্স ৩ 37-তে অন্তত) বলে মনে হচ্ছে keydown keypress keyupunixpapa.com/js/testkey.html
jxmallett

এটাও মনে হয়, ইনপুটগুলির মূল ইভেন্টগুলির জন্য, keyupইভেন্টটি সরিয়ে না দেওয়া পর্যন্ত চরিত্রটি মাঠে উপস্থিত হয় না ।
jxmallett

শেষটি - আইওএসে (8.2) ব্যাকস্পেস কীটি কেবল একটি keydownইভেন্টে আগুন জ্বালিয়ে দেয় তবে এর পরে কিছুক্ষণ অবধি অক্ষরটি ইনপুট থেকে সরানো হয় না।
jxmallett

এই উত্তর। এটি কী প্রেস এবং Ctrl + V
কিপ্রেস

30

keypressঘটনা ব্রাউজারগুলি জুড়ে বিভিন্ন হতে পারে।

আমি ক্রোম এবং ফায়ারফক্সে কীবোর্ড ইভেন্টগুলি ( জিকুয়েরি শর্টকাট ব্যবহার করে) তুলনা করতে একটি জাসফিডেল তৈরি করেছি । আপনি যে keypressইভেন্টটি ব্রাউজারটি ব্যবহার করছেন তার উপর নির্ভর করে আপনি ইভেন্টটি ট্রিগার keydown/keypress/keyupকরা হবে বা না - ব্যাকস্পেস ফায়ারফক্সে ট্রিগার করবে তবে কেবল keydown/keyupক্রোমে।

একক কী-ক্লিক ইভেন্টগুলি ট্রিগার করে

ক্রোমে

  • keydown/keypress/keyupযখন ব্রাউজার একটি কীবোর্ড ইনপুট নিবন্ধন করে ( keypressবহিস্কার করা হয়)

  • keydown/keyup যদি কোনও কীবোর্ড ইনপুট না থাকে (Alt, শিফট, ব্যাকস্পেস, তীর কীগুলির সাথে পরীক্ষিত)

  • keydown শুধু ট্যাবের জন্য?

ফায়ারফক্সে

  • keydown/keypress/keyupযখন ব্রাউজার একটি কীবোর্ড ইনপুট নিবন্ধন করে তবে ব্যাকস্পেস, তীর কী, ট্যাবের keypressজন্যও (তাই এখানে কোনও ইনপুট না দিয়েও বহিস্কার করা হয়)

  • keydown/keyup Alt জন্য, শিফট


এটি অবাক হওয়ার মতো নয় কারণ https://api.jquery.com/keypress/ অনুসারে :

দ্রষ্টব্য: কী টিপস ইভেন্টটি কোনও অফিসিয়াল স্পেসিফিকেশন দ্বারা আচ্ছাদিত নয়, এটি ব্যবহার করার সময় আসল আচরণটি ব্রাউজার, ব্রাউজার সংস্করণ এবং প্ল্যাটফর্মগুলিতে পৃথক হতে পারে।

কী-চাপড়ান ইভেন্ট প্রকারের ব্যবহারটি ডাব্লু 3 সি ( http://www.w3.org/TR/DOM-Level-3-Events/#event-type-keypress ) দ্বারা অবচয় করা হয়েছে

কিপ্রেস ইভেন্টের ধরণটি রেফারেন্স এবং সম্পূর্ণতার জন্য এই স্পেসিফিকেশনে সংজ্ঞায়িত করা হয় তবে এই স্পেসিফিকেশনটি এই ইভেন্টের ধরণের ব্যবহারকে হ্রাস করে। প্রসঙ্গ সম্পাদনা করার সময়, লেখকরা এর পরিবর্তে পূর্ববর্তী ইনপুট ইভেন্টটিতে সদস্যতা নিতে পারেন।


অবশেষে, আপনার প্রশ্নের উত্তর দেওয়ার জন্য আপনার ফায়ারফক্স এবং ক্রোম জুড়ে একটি ব্যাকস্পেস ব্যবহার করা উচিত keyupবা keydownএটি সনাক্ত করা উচিত ।


এখানে চেষ্টা করে দেখুন:

$(".inputTxt").bind("keypress keyup keydown", function (event) {
    var evtType = event.type;
    var eWhich = event.which;
    var echarCode = event.charCode;
    var ekeyCode = event.keyCode;

    switch (evtType) {
        case 'keypress':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        case 'keyup':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<p>");
            break;
        case 'keydown':
            $("#log").html($("#log").html() + "<b>" + evtType + "</b>" + " keycode: " + ekeyCode + " charcode: " + echarCode + " which: " + eWhich + "<br>");
            break;
        default:
            break;
    }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input class="inputTxt" type="text" />
<div id="log"></div>


1
দুর্দান্ত উত্তর - বেশিরভাগ ব্রাউজারগুলিতে ব্যাকস্পেস হ্যান্ডেল করার বিভিন্ন উপায়ে ব্যাখ্যা করার জন্য
Jivan

2
: W3School ইতিমধ্যে এটি সম্পন্ন করা হয় w3schools.com/jsref/...
Tân

1
কোড স্নিপেট খুব সহায়ক ছিল
জন গিলমার

17

আমি লিখে দিয়েছি এমন কিছু, যখনই কেউ ফর্মের ক্ষেত্রের মধ্যে রয়েছে এমন ভেবে লোকেরা ব্যাকস্পেসে আঘাত করে এমন সমস্যা আসে

window.addEventListener("keydown", function(e){
    /*
     * keyCode: 8
     * keyIdentifier: "U+0008"
    */
    if(e.keyCode === 8 && document.activeElement !== 'text') {
        e.preventDefault();
        alert('Prevent page from going back');
    }
});

8

আমার সংখ্যার নিয়ন্ত্রণ:

function CheckNumeric(event) {
    var _key = (window.Event) ? event.which : event.keyCode;
    if (_key > 95 && _key < 106) {
        return true;
    }
    else if (_key > 47 && _key < 58) {
        return true;
    }
    else {
        return false;
    }
}

<input type="text" onkeydown="return CheckNumerick(event);" />

এটি চেষ্টা করুন

ব্যাকস্পেস কী কোডটি 8


6

ইভেন্ট.কি === "ব্যাকস্পেস"

আরও সাম্প্রতিক এবং অনেক ক্লিনার: ব্যবহার event.key। আর যথেচ্ছ নম্বর কোড নেই!

note.addEventListener('keydown', function(event) {
    const key = event.key; // const {key} = event; ES6+
    if (key === "Backspace") {
        // Do something
    }
});

মজিলা ডক্স

সমর্থিত ব্রাউজারগুলি


1
2018 এ এটি সবচেয়ে ভাল উপায়!
tfantina

আমি যে একা ভাষাতে কাজ করেছি তা ব্যাকস্পেসের জন্য 8 কী কোডটি ব্যবহার করছি। ASCII কোডগুলি শিখুন, তারা স্বেচ্ছাচারী নয়।
আন্দ্রে ওয়ার্ল্যাং

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

2

পরিবর্তে কী-আপ / কীডাউন / ইনপুট ইভেন্টগুলির মধ্যে একটি ব্যবহার করুন।

এই রেফারেন্সের উপর ভিত্তি করে , কী-টিপস অবহেলা করা হয় এবং আর প্রস্তাবিত হয় না।

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

আপনি যদি "পূর্বে ইনপুট" ব্যবহার করেন তবে ব্রাউজারের সামঞ্জস্যতা সম্পর্কে সতর্ক হন be । "পূর্ববর্তী ইনপুট" এবং অন্য দুটির মধ্যে পার্থক্য হ'ল ইনপুট মানটি পরিবর্তন হতে চলেছে যখন "প্রিয়ার ইনপুট" নিক্ষেপ করা হয়, সুতরাং যে অক্ষরগুলি ইনপুট মান পরিবর্তন করতে পারে না, তা বরখাস্ত করা হয় না (যেমন শিফট, সিটিআর, এলটি)।

আমার একই সমস্যা ছিল এবং কীআপ ব্যবহার করে এটি সমাধান করা হয়েছিল।

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