पाठ देरी

Question

साथ प्रदर्शित किया जाता है मैं पाठ चाहते हैं मैं एक पाठ क्षेत्र तुरंत एक div में दिखाया जा सकता है में दर्ज करें:

function func() { 
 
    document.getElementById("query").innerHTML = document.getElementById("keyword").value; 
 
} 
 
window.onload = function() { 
 
    keyword.onkeydown = function(e) { 
 
    func(); 
 
    } 
 
}

<input type="text" id="keyword" size="40"> 
 
<div id="query"></div>

यह काम करता है, केवल एक समस्या है, इसके साथ प्रदर्शित किया जाता है देरी।

तो अगर मैं "एबीसी" दर्ज करता हूं, तो यह केवल "एबी" दिखाता है। मुझे एक और चरित्र दर्ज करना होगा, उदाहरण के लिए "abcd", ताकि यह "abc" दिखाता हो।
अंतिम चरित्र हमेशा गायब है।

यहाँ आप इसे बाहर की कोशिश कर सकते: http://jsfiddle.net/285cz0np/

Answer 1

घटना onkeydown निकाल दिया जा रहा है। चूंकि इनपुट तत्व का मान अभी तक नहीं बदला है, इसलिए आप परिणाम नहीं देख रहे हैं।

आप इसे onkeyup पर बदल सकते हैं, इसके बजाय: (updated example)। या आप फ़ंक्शन को कॉल करने से पहले देरी सेट कर सकते हैं।

---

वैकल्पिक रूप से, आप भी input event के लिए सुनो सकता:

Example Here

document.getElementById("keyword").addEventListener('input', function (e) { 
    document.getElementById("query").textContent = e.target.value; 
}); 

Answer 2

मुद्दा है क्योंकि इनपुट पाठ मान, जब तक आप कुंजी छोड़ दें परिवर्तन नहीं। setTimeout का उपयोग करके आप अपने समारोह (func)

चल रहा मेरा सुझाव है onkeyup बदलने के लिए नहीं, क्योंकि तुम onkeydown चाहते हैं, इस समाधान अभी भी onkeydown घटना

का उपयोग कर काम करेंगे से पहले मूल्य, अद्यतन करने के लिए ब्राउज़र जाने

keyword.onkeydown = function (e) { 
     setTimeout(func,0) 
    } 

अद्यतन उदाहरण jsFiddle: http://jsfiddle.net/285cz0np/1/

मैं तुम्हें input घटना के लिए बदलने के लिए सलाह देते हैं। उदाहरण के लिए, यदि उपयोगकर्ता क्लिपबोर्ड से पेस्ट करता है (केवल माउस का उपयोग करके), तो आपका ईवेंट आग नहीं लगेगा।

Answer 3

ऐसा इसलिए है क्योंकि फ़ंक्शन को सक्रिय करने वाली घटना onkeydown है, इसलिए जब कुंजी दबाया जाता है, तो फ़ंक्शन टेक्स्ट क्षेत्र के मान को पढ़ता है। इस समय यह डेटा पढ़ता है, दबाई गई कुंजी को वास्तविक मान में अभी तक जोड़ा नहीं गया है।

एक आसान ठीक है क्योंकि समय कुंजी को ऊपर राज्य में है द्वारा onkeyup को घटना को बदलने के लिए है, उस कुंजी का मूल्य मूल्य में जोड़ दिया जाएगा।

window.onload = function() { 
    keyword.onkeyup = function (e) { 
     func(); 
    } 
}