วิธีที่ดีที่สุดในการติดตามการเปลี่ยนตามประเภทที่คุณพิมพ์ = "text"?

จากประสบการณ์ของฉันinput type="text" onchangeเหตุการณ์มักจะเกิดขึ้นหลังจากคุณออก ( blur) การควบคุมเท่านั้น

มีวิธีบังคับให้เบราว์เซอร์เรียกเนื้อหาเปลี่ยนแปลงonchangeทุกครั้งtextfieldหรือไม่ ถ้าไม่เป็นวิธีที่ดีที่สุดในการติดตาม "ด้วยตนเอง" นี้คืออะไร?

การใช้onkey*กิจกรรมไม่น่าเชื่อถือเนื่องจากคุณสามารถคลิกขวาที่ฟิลด์และเลือกวางและสิ่งนี้จะเปลี่ยนฟิลด์โดยไม่ต้องป้อนคีย์บอร์ด

เป็นsetTimeoutวิธีเดียวหรือไม่ .. น่าเกลียด :-)

ปรับปรุง:

ดูคำตอบอื่น (2015)

คำตอบเดิม 2009:

ดังนั้นคุณต้องการให้onchangeเหตุการณ์ดำเนินการกับ keydown, เบลอและวางหรือไม่ นั่นคือเวทมนตร์

"onkeydown"หากคุณต้องการที่จะติดตามการเปลี่ยนแปลงที่พวกเขาพิมพ์ใช้ หากคุณต้องการดักจับการดำเนินการด้วยเมาส์ให้ใช้"onpaste"( IE , FF3 ) และ"oninput"( FF, Opera, Chrome, Safari ¹ )

¹ _{ใช้งานไม่ได้<textarea>บน Safari ใช้textInputแทน}

oninputวันนี้ฟัง รู้สึกเหมือนonchangeไม่ต้องเสียสมาธิกับองค์ประกอบ มันคือ HTML5

มันสนับสนุนโดยทุกคน (แม้แต่มือถือ) ยกเว้น IE8 และด้านล่าง สำหรับ IE 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>

โค้ดด้านล่างใช้ได้ดีสำหรับฉันด้วย Jquery 1.8.3

HTML: <input type="text" id="myId" />

Javascript / JQuery:

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

Javascript เป็นสิ่งที่คาดเดาไม่ได้และตลกที่นี่

• onchange เกิดขึ้นเฉพาะเมื่อคุณเบลอช่องข้อความ
• onkeyup& onkeypressไม่ได้เกิดขึ้นกับการเปลี่ยนแปลงข้อความเสมอไป
• onkeydown เกิดขึ้นกับการเปลี่ยนแปลงข้อความ (แต่ไม่สามารถติดตามการตัดและวางด้วยการคลิกเมาส์)
• onpasteและoncutเกิดขึ้นกับปุ่มกดและแม้จะมีการคลิกขวาของเมาส์

ดังนั้นในการติดตามการเปลี่ยนแปลงในช่องที่เราต้องonkeydown, และoncut onpasteในการโทรกลับของเหตุการณ์เหล่านี้ถ้าคุณตรวจสอบค่าของกล่องข้อความคุณจะไม่ได้รับค่าที่อัปเดตเนื่องจากค่าจะเปลี่ยนหลังจากการโทรกลับ ดังนั้นทางออกสำหรับสิ่งนี้คือการตั้งค่าฟังก์ชั่นไทม์เอาต์ด้วยการหมดเวลาของ 50 mili-seconds (หรืออาจจะน้อยกว่า) เพื่อติดตามการเปลี่ยนแปลง

นี่เป็นแฮ็คสกปรก แต่นี่เป็นวิธีเดียวที่ฉันค้นคว้า

นี่คือตัวอย่าง http://jsfiddle.net/2BfGC/12/

onkeyupเกิดขึ้นหลังจากที่คุณพิมพ์เช่นฉันกดtเมื่อฉันยกนิ้วการกระทำที่เกิดขึ้น แต่ในkeydownการกระทำที่เกิดขึ้นก่อนที่ฉันจะตัวละครหลักt

หวังว่านี่จะเป็นประโยชน์สำหรับใครบางคน

ดังนั้นonkeyupจะดีกว่าเมื่อคุณต้องการส่งสิ่งที่คุณเพิ่งพิมพ์ตอนนี้

ฉันมีข้อกำหนดที่คล้ายกัน (ฟิลด์ข้อความสไตล์ Twitter) ที่ใช้และonkeyup ดูแลการดำเนินการวางเมาส์ระหว่างการโฟกัสหายไปจากฟิลด์onchangeonchange

[อัปเดต]ใน HTML5 หรือใหม่กว่าใช้oninputเพื่อรับการอัปเดตตัวละครแบบเรียลไทม์ตามที่อธิบายไว้ในคำตอบอื่น ๆ ด้านบน

ฉันคิดว่าในปี 2018 จะดีกว่าที่จะใช้ inputกิจกรรม

-

ตามที่ WHATWG Spec อธิบาย ( https://html.spec.whatwg.org/multipage/indices.html#event-input-input ):

ยิงที่การควบคุมเมื่อผู้ใช้เปลี่ยนค่า (ดูเหตุการณ์การเปลี่ยนแปลงด้วย )

-

นี่คือตัวอย่างของวิธีการใช้งาน:

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

หากคุณใช้ Internet Explorer เท่านั้นคุณสามารถใช้สิ่งนี้:

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

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

หวังว่าจะช่วย

มีวิธีแก้ปัญหาค่อนข้างใกล้ (อย่าแก้ไขวิธีการวางทั้งหมด) แต่ส่วนใหญ่:

มันใช้งานได้กับอินพุตเช่นเดียวกับ textareas:

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

ทำเช่นนี้:

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

อย่างที่ฉันบอกว่าไม่ใช่ทุกวิธีในการวางไฟเหตุการณ์ในเบราว์เซอร์ทั้งหมด ... ที่เลวร้ายที่สุดบางคนไม่ได้ยิงเหตุการณ์ใด ๆ เลย แต่ตัวจับเวลาน่ากลัวที่จะใช้สำหรับเช่นนี้

แต่วิธีการวางส่วนใหญ่จะทำด้วยแป้นพิมพ์และ / หรือเมาส์ดังนั้นโดยปกติแล้ว onkeyup หรือ onmouseup จะเริ่มทำงานหลังจากวางแล้ว onkeyup จะทำงานเมื่อพิมพ์บนแป้นพิมพ์

ตรวจสอบให้แน่ใจว่ารหัสตรวจสอบเล็กน้อยไม่ต้องใช้เวลามาก ... มิฉะนั้นผู้ใช้จะได้รับการแสดงผลที่ไม่ดี

ใช่เคล็ดลับคือการยิงคีย์และเม้าส์ ... แต่ระวังให้ถูกยิงได้ดังนั้นโปรดระลึกไว้เช่นนี้ !!!

โปรดตัดสินแนวทางต่อไปโดยใช้ JQuery:

HTML:

<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
});

"อินพุต" ใช้งานได้สำหรับฉัน

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

คุณสามารถใช้keydown, keyupและkeypressเหตุการณ์ที่เกิดขึ้นได้เป็นอย่างดี

หากต้องการติดตามแต่ละลองใช้ตัวอย่างนี้และก่อนหน้านั้นจะลดอัตราการกะพริบของเคอร์เซอร์เป็นศูนย์อย่างสมบูรณ์

<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: เหตุการณ์สร้างเมื่อออก

onchange: เหตุการณ์สร้างเมื่อออกหากมีการเปลี่ยนแปลงใด ๆ ในอินพุต

onkeydown: เหตุการณ์สร้างบนการกดปุ่มใด ๆ (สำหรับการกดปุ่มค้างไว้นาน ๆ )

onkeyup: เหตุการณ์สร้างขึ้นในการปล่อยปุ่มใด ๆ

onkeypress: เหมือนกับ onkeydown (หรือ onkeyup) แต่จะไม่ตอบสนองต่อ ctrl, backsace, alt อื่น ๆ

2561 ที่นี่นี่คือสิ่งที่ฉันทำ:

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

หากคุณสามารถชี้ให้เห็นข้อบกพร่องในวิธีการนี้ฉันจะขอบคุณ

วิธีที่ 1:เพิ่มตัวฟังเหตุการณ์สำหรับinput:

element.addEventListener("input", myFunction);

วิธีที่ 2:กำหนดoninputคุณสมบัติด้วย JavaScript:

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

วิธีที่ 3:กำหนดoninputคุณสมบัติด้วย HTML:

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

ไม่รองรับ Robert Siemer addEventListener ใน IE8

"IE เวอร์ชันเก่ากว่ารองรับเมธอด EventTarget.attachEvent () ที่เทียบเท่าและเป็นกรรมสิทธิ์" https://developer.mozilla.org/it/docs/Web/API/Element/addEventListener