डेटालिस्ट और एंटर कुंजी इवेंट

Question

मेरे पास एक इनपुट टेक्स्ट फ़ील्ड है जिस पर मैं महत्वपूर्ण ईवेंट ट्रिगर करता हूं। दर्ज करने पर, मैं इनपुट मान के साथ कुछ विशिष्ट कोड को संसाधित करता हूं। सभी महान काम करता है।

Haml:

%input#myField{:type => "text"} 

जावास्क्रिप्ट:

my_field = document.getElementById('myField'); 

my_field.addEventListener("keypress", function (event) { 
    if (event.keyCode == 13) { 
     event.preventDefault(); 

     if (tag_field.value.length != 0) { 
      console.log(my_field.value); 
      // Run my specific process with my_field.value 
      my_field.value = ''; 
     } 
    } 
}, false); 

लेकिन अब मैं इस इनपुट पर DataList जोड़ना चाहते हैं।

Haml:

%input#myField{:list => "htmlList", :type => "text"} 
%datalist#htmlList 
    %option{:value => "toto"} toto 
    %option{:value => "foo"} foo 

समस्या जब मैं DataList पर नेविगेट किसी आइटम का चयन करने के लिए, मैं प्रेस दर्ज की कुंजी है। एंटर कुंजी पर, मेरे श्रोता को इनपुट के प्रारंभिक मूल्य के साथ मेरे कोड को कॉल और संसाधित किया जाता है।
इस चरण में, फ़ील्ड का मान खाली है। इसके बाद, मूल्य को डेटलिस्ट में चयनित मूल्य से प्रतिस्थापित किया जाता है।

तो मेरी प्रश्न हैं:

• वहाँ प्रवेश कुंजी दबाने के बिना DataList चयनित मान के द्वारा इनपुट मूल्य को बदलने के लिए DataList के व्यवहार को बदलने के लिए एक रास्ता है? (डाटलिस्ट के लिए एंटर कुंजी अक्षम करें)

• क्या मेरे इवेंट लिस्टनर में एक अलग व्यवहार को संसाधित करने के लिए डेटालिस्ट सक्रिय (या दृश्यमान) का पता लगाने का कोई तरीका है?

Answer 1

Keypress गतिविधि सक्रिय की जाएगी के बाद आप कुंजी दबाते लेकिन डेटा क्षेत्र में पंजीकृत होने के बाद। Keyup गतिविधि सक्रिय की जाएगी के बाद आप कुंजी दबाते लेकिन बाद डेटा क्षेत्र में पंजीकृत है

HTML:

<input list="browsers" id="myField"/> 
<datalist id="browsers"> 
    <option value="Chrome"> 
    <option value="Firefox"> 
    <option value="Internet Explorer"> 
    <option value="Opera"> 
    <option value="Safari"> 
</datalist> 

जे एस:

var my_field = document.getElementById('myField'); 

     my_field.addEventListener("keyup", function (event) { 
      if (event.keyCode == 13) { 
       event.preventDefault(); 

       if (my_field.value.length != 0) { 
        console.log(my_field.value); 
        // Run my specific process with my_field.value 
        my_field.value = ''; 
       } 
      } 
     }, false); 

http://jsfiddle.net/5p6FZ/