การตรวจจับการเปลี่ยนแปลง Textarea

ฉันจะตรวจจับเหตุการณ์การเปลี่ยนแปลงบน textarea โดยใช้ javascript ได้อย่างไร
ฉันกำลังพยายามตรวจสอบจำนวนอักขระที่เหลือขณะที่คุณพิมพ์

ฉันลองใช้เหตุการณ์ onchange แต่ดูเหมือนว่าจะเริ่มต้นเมื่อโฟกัสไม่อยู่เท่านั้น

คุณจะต้องใช้onkeyup และ onchangeสำหรับสิ่งนี้ onchange จะป้องกันการวางเมนูตามบริบทและการเปิดคีย์อัพจะเริ่มทำงานทุกครั้งที่กดแป้นพิมพ์

ดูคำตอบของฉันเกี่ยวกับวิธีกำหนดความยาวสูงสุดบน textAreaสำหรับตัวอย่างโค้ด

เป็นปี 2012 ยุคหลังพีซีมาถึงแล้วและเรายังคงต้องต่อสู้กับบางสิ่งที่เป็นพื้นฐานเช่นนี้ นี้ควรจะเป็นเรื่องง่ายมาก

จนกว่าจะถึงเวลาที่ความฝันจะสำเร็จนี่คือวิธีที่ดีที่สุดในการทำเช่นนี้ข้ามเบราว์เซอร์: ใช้การผสมผสานระหว่างเหตุการณ์inputและonpropertychangeเหตุการณ์เช่นนี้

var area = container.querySelector('textarea');
if (area.addEventListener) {
  area.addEventListener('input', function() {
    // event handling code for sane browsers
  }, false);
} else if (area.attachEvent) {
  area.attachEvent('onpropertychange', function() {
    // IE-specific event handling code
  });
}

inputเหตุการณ์ดูแลIE9 + FF, Chrome, Opera และ SafariและonpropertychangeดูแลIE8 (มันยังทำงานร่วมกับ IE6 และ 7 แต่มีข้อบกพร่องบางอย่าง)

ประโยชน์ของการใช้inputและการonpropertychangeที่พวกเขาไม่ได้ยิงไม่จำเป็น (เช่นเมื่อกดCtrlหรือShiftคีย์); ดังนั้นหากคุณต้องการที่จะเรียกใช้การดำเนินการค่อนข้างแพงเมื่อเนื้อหา textarea เปลี่ยนแปลงนี้เป็นวิธีที่จะไป

ตอนนี้ IE เช่นเคยไม่ได้งานครึ่ง assed ของการสนับสนุนนี้: ค่าinputมิได้onpropertychangeเกิดเพลิงไหม้ใน IE เมื่อตัวละครจะถูกลบออกจากพื้นที่ข้อความ ดังนั้นหากคุณจำเป็นต้องจัดการกับการลบอักขระใน IE ให้ใช้keypress(ซึ่งตรงข้ามกับการใช้keyup/ keydownเนื่องจากจะเริ่มทำงานเพียงครั้งเดียวแม้ว่าผู้ใช้จะกดปุ่มค้างไว้ก็ตาม)

ที่มา: http://www.alistapart.com/articles/expanding-text-areas-made-elegant/

แก้ไข:ดูเหมือนว่าโซลูชันข้างต้นจะไม่สมบูรณ์แบบตามที่ระบุไว้อย่างถูกต้องในความคิดเห็น: การมีอยู่ของaddEventListenerคุณสมบัติบน textarea ไม่ได้หมายความว่าคุณกำลังทำงานกับเบราว์เซอร์ที่มีสติ ในทำนองเดียวกันการมีอยู่ของattachEventคุณสมบัติไม่ได้หมายความถึง IE หากคุณต้องการให้รหัสของคุณแน่นมากคุณควรพิจารณาเปลี่ยนรหัสนั้น ดูความคิดเห็นของ Tim Downสำหรับคำแนะนำ

• สำหรับ Google-Chrome oninput จะเพียงพอ (ทดสอบบน Windows 7 ด้วยเวอร์ชัน 22.0.1229.94 ม.)
• สำหรับ IE 9 oninput จะจับทุกอย่างยกเว้นตัดผ่านเมนูบริบทและ backspace
• สำหรับ IE 8 จำเป็นต้องใช้ onpropertychange เพื่อจับการวางนอกเหนือจาก oninput
• สำหรับ IE 9 + 8 จำเป็นต้องใช้ onkeyup เพื่อจับ backspace
• สำหรับ IE 9 + 8 onmousemove เป็นวิธีเดียวที่ฉันพบในการจับการตัดผ่านเมนูบริบท

ไม่ได้ทดสอบบน Firefox

    var isIE = /*@cc_on!@*/false; // Note: This line breaks closure compiler...

    function SuperDuperFunction() {
        // DoSomething
    }


    function SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally() {
        if(isIE) // For Chrome, oninput works as expected
            SuperDuperFunction();
    }

<textarea id="taSource"
          class="taSplitted"
          rows="4"
          cols="50"
          oninput="SuperDuperFunction();"
          onpropertychange="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onmousemove="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();"
          onkeyup="SuperDuperFunctionBecauseMicrosoftMakesIEsuckIntentionally();">
Test
</textarea>

ฉันรู้ว่านี่ไม่ใช่คำถามของคุณ แต่ฉันคิดว่านี่อาจเป็นประโยชน์ สำหรับแอปพลิเคชั่นบางอย่างมันเป็นการดีที่จะให้ฟังก์ชันการเปลี่ยนแปลงไม่ทำงานทุกครั้งที่กดปุ่ม สิ่งนี้สามารถทำได้ด้วยสิ่งนี้:

var text = document.createElement('textarea');
text.rows = 10;
text.cols = 40;
document.body.appendChild(text);

text.onkeyup = function(){
var callcount = 0;
    var action = function(){
        alert('changed');
    }
    var delayAction = function(action, time){
        var expectcallcount = callcount;
        var delay = function(){
            if(callcount == expectcallcount){
                action();
            }
        }
        setTimeout(delay, time);
    }
    return function(eventtrigger){
        ++callcount;
        delayAction(action, 1200);
    }
}();

วิธีนี้ทำงานโดยการทดสอบว่าเหตุการณ์ล่าสุดเกิดขึ้นภายในช่วงเวลาที่ล่าช้าหรือไม่ โชคดี!

ฉันรู้ว่าคำถามนี้เป็นคำถามเฉพาะสำหรับ JavaScript แต่ดูเหมือนจะไม่มีวิธีที่ดีและสะอาดเสมอในการตรวจจับเสมอเมื่อมีการเปลี่ยนแปลงพื้นที่ข้อความในเบราว์เซอร์ปัจจุบันทั้งหมด ฉันได้เรียนรู้ว่า jquery ได้ดูแลเราแล้ว มันยังจัดการการเปลี่ยนแปลงเมนูตามบริบทของพื้นที่ข้อความ ใช้ไวยากรณ์เดียวกันโดยไม่คำนึงถึงประเภทอินพุต

    $('div.lawyerList').on('change','textarea',function(){
      // Change occurred so count chars...
    });

หรือ

    $('textarea').on('change',function(){
      // Change occurred so count chars...
    });

คุณสามารถฟังเหตุการณ์เกี่ยวกับการเปลี่ยนแปลงพื้นที่ข้อความและทำการเปลี่ยนแปลงตามที่คุณต้องการ นี่คือตัวอย่างหนึ่ง

(() => {
	const textArea = document.getElementById('my_text_area');
  textArea.addEventListener('input', () => {
    let textLn =  textArea.value.length;
    if(textLn >= 100) {
      textArea.style.fontSize = '10pt';
    }

  })
})()

<html>
<textarea id='my_text_area' rows="4" cols="50" style="font-size:40pt">
This text will change font after 100.
</textarea>
</html>

คีย์อัพควรเพียงพอหากจับคู่กับแอตทริบิวต์การตรวจสอบความถูกต้อง / รูปแบบอินพุต HTML5 ดังนั้นสร้างรูปแบบ (regex) เพื่อตรวจสอบความถูกต้องของอินพุตและดำเนินการกับสถานะ. checkValidity () สิ่งที่ต้องการด้านล่างสามารถใช้งานได้ ในกรณีของคุณคุณต้องการให้นิพจน์ทั่วไปตรงกับความยาว วิธีการแก้ปัญหาของฉันคือในการใช้งาน / การสาธิตสามารถออนไลน์ที่นี่

<input type="text" pattern="[a-zA-Z]+" id="my-input">

var myInput = document.getElementById = "my-input";

myInput.addEventListener("keyup", function(){
  if(!this.checkValidity() || !this.value){
    submitButton.disabled = true;
  } else {
    submitButton.disabled = false;
  }
});

รหัสที่ฉันใช้สำหรับ IE 11 โดยไม่มี jquery และสำหรับ textarea เดียว:

javascript:

// Impede que o comentário tenha mais de num_max caracteres
var internalChange= 0; // important, prevent reenter
function limit_char(max)
{ 
    if (internalChange == 1)
    {
        internalChange= 0;
        return;
    }
    internalChange= 1;
    // <form> and <textarea> are the ID's of your form and textarea objects
    <form>.<textarea>.value= <form>.<textarea>.value.substring(0,max);
}

และ html:

<TEXTAREA onpropertychange='limit_char(5)' ...

ลองอันนี้. มันง่ายมากและตั้งแต่ปี 2016 ฉันมั่นใจว่ามันจะใช้ได้กับเบราว์เซอร์ส่วนใหญ่

<textarea id="text" cols="50" rows="5" onkeyup="check()" maxlength="15"></textarea> 
<div><span id="spn"></span> characters left</div>

function check(){
    var string = document.getElementById("url").value
    var left = 15 - string.length;
    document.getElementById("spn").innerHTML = left;
}

สิ่งที่ดีที่สุดที่คุณสามารถทำได้คือการตั้งค่าฟังก์ชันที่จะเรียกตามระยะเวลาที่กำหนดและฟังก์ชันนี้เพื่อตรวจสอบเนื้อหาของพื้นที่ข้อความของคุณ

self.setInterval('checkTextAreaValue()', 50);