วิธีรับข้อความของกล่องข้อความอินพุตระหว่าง onKeyPress?

ฉันกำลังพยายามรับข้อความในกล่องข้อความตามที่ผู้ใช้พิมพ์ ( jsfiddle playground ):

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onKeyPress="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

รหัสทำงานโดยไม่มีข้อผิดพลาดยกเว้นว่าค่าของinput textกล่องระหว่างonKeyPressจะเป็นค่าก่อนการเปลี่ยนแปลงเสมอ:

คำถาม : ฉันจะรับข้อความของกล่องข้อความได้onKeyPressอย่างไร?

โบนัสแช็ต

มีสามเหตุการณ์ที่เกี่ยวข้องกับ"ผู้ใช้กำลังพิมพ์"ใน HTML DOM:

• onKeyDown
• onKeyPress
• onKeyUp

ในWindowsลำดับของWM_Keyข้อความจะมีความสำคัญเมื่อผู้ใช้กดคีย์ค้างไว้และคีย์จะเริ่มซ้ำ:

• WM_KEYDOWN('a')- ผู้ใช้มีการผลักดันให้ลงAที่สำคัญ
• WM_CHAR('a')- aได้รับตัวละครจากผู้ใช้
• WM_CHAR('a')- aได้รับตัวละครจากผู้ใช้
• WM_CHAR('a')- aได้รับตัวละครจากผู้ใช้
• WM_CHAR('a')- aได้รับตัวละครจากผู้ใช้
• WM_CHAR('a')- aได้รับตัวละครจากผู้ใช้
• WM_KEYUP('a')- ผู้ใช้ปล่อยAคีย์

จะส่งผลให้อักขระห้าตัวปรากฏในตัวควบคุมข้อความ: aaaaa

ประเด็นสำคัญคือคุณตอบสนองต่อWM_CHARข้อความที่เกิดขึ้นซ้ำ ๆ มิฉะนั้นคุณจะพลาดเหตุการณ์เมื่อกดปุ่ม

ในHTMLสิ่งที่แตกต่างกันเล็กน้อย:

• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyDown
• onKeyPress
• onKeyUp

html มอบKeyDownและKeyPressทุกซ้ำที่สำคัญ และKeyUpเหตุการณ์จะเพิ่มขึ้นเมื่อผู้ใช้ปล่อยคีย์เท่านั้น

นำไป

• ฉันสามารถตอบสนองonKeyDownหรือonKeyPressแต่ทั้งสองยังคงถูกยกขึ้นก่อนที่จะinput.valueมีการอัปเดต
• ฉันไม่สามารถตอบสนองได้onKeyUpเพราะมันไม่เกิดขึ้นเมื่อข้อความในกล่องข้อความเปลี่ยนไป

คำถาม:ฉันจะรับข้อความของกล่องข้อความได้onKeyPressอย่างไร?

การอ่านโบนัส

• รับค่าฟอร์มด้วย jQuery
• รับค่าในกล่องข้อความอินพุต

การจัดการกับinputเหตุการณ์ที่เป็นโซลูชั่นที่สอดคล้อง: จะได้รับการสนับสนุนสำหรับtextareaและinputองค์ประกอบในเบราว์เซอร์ร่วมสมัยและความรุนแรงว่าเมื่อคุณต้องการ:

function edValueKeyPress() {
    var edValue = document.getElementById("edValue");
    var s = edValue.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: " + s;
}

<input id="edValue" type="text" onInput="edValueKeyPress()"><br>
<span id="lblValue">The text box contains: </span>

ฉันจะเขียนมันใหม่สักหน่อยแม้ว่า:

function showCurrentValue(event)
{
    const value = event.target.value;
    document.getElementById("lblValue").innerText = value;
}

<input id="edValue" type="text" onInput="showCurrentValue(event)"><br>
The text box contains: <span id="lblValue"></span>

ง่าย ๆ เข้าไว้. ใช้ทั้งสองอย่างonKeyPress()และonKeyUp():

<input id="edValue" type="text" onKeyPress="edValueKeyPress()" onKeyUp="edValueKeyPress()">

สิ่งนี้จะดูแลการรับค่าสตริงที่อัปเดตที่สุด (หลังจากคีย์ขึ้น) และยังอัปเดตหากผู้ใช้กดคีย์ค้างไว้

jsfiddle: http://jsfiddle.net/VDd6C/8/

ค่าของกล่องข้อความอินพุตระหว่าง onKeyPress จะเป็นค่าก่อนการเปลี่ยนแปลงเสมอ

นี่คือวัตถุประสงค์: ช่วยให้ผู้ฟังเหตุการณ์สามารถยกเลิกการกดแป้นได้

หากผู้ฟังเหตุการณ์ยกเลิกเหตุการณ์ค่าจะไม่อัปเดต หากเหตุการณ์จะไม่ถูกยกเลิกค่าที่มีการปรับปรุง แต่หลังจากฟังเหตุการณ์ที่เรียกว่า

หากต้องการรับค่าหลังจากอัปเดตค่าฟิลด์แล้วให้กำหนดเวลาให้ฟังก์ชันทำงานในลูปเหตุการณ์ถัดไป วิธีปกติในการทำเช่นนี้คือการเรียกsetTimeoutด้วยหมดเวลาของ0:

$('#field').keyup(function() {
    var $field = $(this);

    // this is the value before the keypress
    var beforeVal = $field.val();

    setTimeout(function() {

        // this is the value after the keypress
        var afterVal = $field.val();
    }, 0);
});

ลองดูที่นี่: http://jsfiddle.net/Q57gY/2/

แก้ไข : เบราว์เซอร์บางตัว (เช่น Chrome) ไม่ทริกเกอร์เหตุการณ์การกดแป้นพิมพ์สำหรับ backspace เปลี่ยนการกดแป้นพิมพ์เป็นการป้อนรหัส

ให้มันกะทัดรัด
ทุกครั้งที่คุณกดปุ่มฟังก์ชันedValueKeyPress()จะถูกเรียกใช้
คุณยังได้ประกาศและเตรียมใช้งานตัวแปรบางตัวในฟังก์ชันนั้นซึ่งทำให้กระบวนการช้าลงและต้องใช้ CPU และหน่วยความจำมากขึ้นเช่นกัน
คุณสามารถใช้รหัสนี้ - ได้มาจากการแทนที่อย่างง่าย

function edValueKeyPress()
{
    document.getElementById("lblValue").innerText =""+document.getElementById("edValue").value;
}

นั่นคือทั้งหมดที่คุณต้องการและเร็วขึ้น!

<asp:TextBox ID="txtMobile" runat="server" CssClass="form-control" style="width:92%;  margin:0px 5px 0px 5px;" onkeypress="javascript:return isNumberKey(event);" MaxLength="12"></asp:TextBox>

<script>
    function isNumberKey(evt) {
        var charCode = (evt.which) ? evt.which : event.keyCode;
        if (charCode > 31 && (charCode < 48 || charCode > 57)) {
            return false;
        }
        return true;
    }
</script>

จนถึงขณะนี้ไม่มีคำตอบใดที่มีโซลูชันที่สมบูรณ์ มีปัญหาค่อนข้างน้อยที่ต้องแก้ไข:

1. ไม่ได้ส่งการกดแป้นทั้งหมดไปยังkeydownและkeypressตัวจัดการ (เช่นปุ่มย้อนกลับและปุ่มลบจะถูกระงับโดยเบราว์เซอร์บางตัว)
2. การจัดการkeydownไม่ใช่ความคิดที่ดี มีสถานการณ์ที่การกดปุ่มลงไม่ส่งผลให้เกิดการกดแป้น!
3. setTimeout() การแก้ปัญหาสไตล์ล่าช้าภายใต้เว็บเบราว์เซอร์ Google Chrome / Blink จนกว่าผู้ใช้จะหยุดพิมพ์
4. อาจใช้เมาส์และเหตุการณ์การสัมผัสเพื่อดำเนินการต่างๆเช่นตัดคัดลอกและวาง เหตุการณ์เหล่านั้นจะไม่ทำให้เกิดเหตุการณ์แป้นพิมพ์
5. เบราว์เซอร์ขึ้นอยู่กับวิธีการป้อนข้อมูลอาจไม่ส่งการแจ้งเตือนว่าองค์ประกอบมีการเปลี่ยนแปลงจนกว่าผู้ใช้จะออกไปจากฟิลด์

วิธีการแก้ปัญหาที่ถูกต้องมากขึ้นจะจัดการkeypress, keyup, inputและchangeเหตุการณ์ที่เกิดขึ้น

ตัวอย่าง:

<p><input id="editvalue" type="text"></p>
<p>The text box contains: <span id="labelvalue"></span></p>

<script>
function UpdateDisplay()
{
    var inputelem = document.getElementById("editvalue");
    var s = inputelem.value;

    var labelelem = document.getElementById("labelvalue");
    labelelem.innerText = s;
}

// Initial update.
UpdateDisplay();

// Register event handlers.
var inputelem = document.getElementById("editvalue");
inputelem.addEventListener('keypress', UpdateDisplay);
inputelem.addEventListener('keyup', UpdateDisplay);
inputelem.addEventListener('input', UpdateDisplay);
inputelem.addEventListener('change', UpdateDisplay);
</script>

ซอ:

http://jsfiddle.net/VDd6C/2175/

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

โดยปกติฉันจะเชื่อมต่อค่าของฟิลด์ (เช่นก่อนที่จะอัปเดต) กับคีย์ที่เกี่ยวข้องกับเหตุการณ์สำคัญ ต่อไปนี้ใช้ JS ล่าสุดดังนั้นจึงต้องปรับเปลี่ยนเพื่อรองรับ IE รุ่นเก่า

ตัวอย่าง JS ล่าสุด

document.querySelector('#test').addEventListener('keypress', function(evt) {
    var real_val = this.value + String.fromCharCode(evt.which);
    if (evt.which == 8) real_val = real_val.substr(0, real_val.length - 2);
    alert(real_val);
}, false);

รองรับ IE รุ่นเก่า

//get field
var field = document.getElementById('test');

//bind, somehow
if (window.addEventListener)
    field.addEventListener('keypress', keypress_cb, false);
else
    field.attachEvent('onkeypress', keypress_cb);

//callback
function keypress_cb(evt) {
    evt = evt || window.event;
    var code = evt.which || evt.keyCode,
        real_val = this.value + String.fromCharCode(code);
    if (code == 8) real_val = real_val.substr(0, real_val.length - 2);
}

[แก้ไข - โดยค่าเริ่มต้นวิธีนี้จะปิดใช้งานการกดแป้นสำหรับสิ่งต่างๆเช่น back space, CTRL + A รหัสด้านบนรองรับสำหรับอดีต แต่จะต้องมีการแก้ไขเพิ่มเติมเพื่อให้สามารถใช้งานได้ในภายหลังและเหตุการณ์อื่น ๆ อีกเล็กน้อย ดูความคิดเห็นของ Ian Boyd ด้านล่าง]

ง่าย...

ในตัวจัดการเหตุการณ์คีย์กดเขียน

void ValidateKeyPressHandler(object sender, KeyPressEventArgs e)
{
    var tb = sender as TextBox;
    var startPos = tb.SelectionStart;
    var selLen= tb.SelectionLength;

    var afterEditValue = tb.Text.Remove(startPos, selLen)
                .Insert(startPos, e.KeyChar.ToString()); 
    //  ... more here
}

ดังนั้นจึงมีข้อดีและข้อเสียในแต่ละเหตุการณ์ เหตุการณ์onkeypressและonkeydownไม่ดึงค่าล่าสุดและonkeypressไม่เริ่มทำงานสำหรับอักขระที่ไม่สามารถพิมพ์ได้ในบางเบราว์เซอร์ onkeyupเหตุการณ์ไม่ได้ตรวจสอบเมื่อคีย์ค้างไว้เป็นตัวละครหลาย ๆ

นี่เป็นการแฮ็กเล็กน้อย แต่การทำสิ่งที่ชอบ

function edValueKeyDown(input) {
    var s = input.value;

    var lblValue = document.getElementById("lblValue");
    lblValue.innerText = "The text box contains: "+s;

    //var s = $("#edValue").val();
    //$("#lblValue").text(s);    
}

<input id="edValue" type="text" onkeydown="setTimeout(edValueKeyDown, 0, this)" />

ดูเหมือนจะจัดการกับสิ่งที่ดีที่สุดในโลกทั้งหมด

ด้วยการใช้event.keyเราสามารถรับค่าก่อนเข้าสู่ HTML Input Text Box นี่คือรหัส

function checkText()
{
  console.log("Value Entered which was prevented was - " + event.key);
  
  //Following will prevent displaying value on textbox
  //You need to use your validation functions here and return value true or false.
  return false;
}

<input type="text" placeholder="Enter Value" onkeypress="return checkText()" />

พยายามเชื่อมต่อ charCode เหตุการณ์กับค่าที่คุณได้รับ นี่คือตัวอย่างรหัสของฉัน:

<input type="text" name="price" onkeypress="return (cnum(event,this))" maxlength="10">
<p id="demo"></p>

js:

function cnum(event, str) {
    var a = event.charCode;
    var ab = str.value + String.fromCharCode(a);
    document.getElementById('demo').innerHTML = ab;
}

ค่าในabจะได้รับค่าล่าสุดในช่องป้อนข้อมูล

มีวิธีที่ดีกว่านี้คือ ใช้วิธี concat ตัวอย่าง

ประกาศตัวแปรส่วนกลาง ใช้งานได้ดีกับ angular 10 เพียงแค่ส่งไปยัง Vanilla JavaScript ตัวอย่าง:

HTML

<input id="edValue" type="text" onKeyPress="edValueKeyPress($event)"><br>
<span id="lblValue">The text box contains: </span>

รหัส

emptyString = ''

edValueKeyPress ($event){
   this.emptyString = this.emptyString.concat($event.key);
   console.log(this.emptyString);
}