jQuery รับค่าอินพุตหลังจากกดแป้น

129

ฉันมีฟังก์ชั่นดังต่อไปนี้:

$(document).ready(function() {
    $("#dSuggest").keypress(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

ด้วยเหตุผลบางประการสำหรับการกดแป้นแรกฉันได้รับสตริงว่างในบันทึกของคอนโซล

jquery jquery-events

— หรือ Weinberger
แหล่งที่มา

157

เนื่องจากkeypressเหตุการณ์จะเริ่มทำงานก่อนที่จะเพิ่มอักขระใหม่valueในองค์ประกอบ (ดังนั้นkeypressเหตุการณ์แรกจะเริ่มทำงานก่อนที่จะเพิ่มอักขระตัวแรกในขณะที่valueยังว่างอยู่) คุณควรใช้keyupแทนซึ่งจะเริ่มทำงานหลังจากเพิ่มตัวละครแล้ว

โปรดทราบว่าหากองค์ประกอบของคุณ#dSuggestเหมือนกับinput:text[name=dSuggest]คุณสามารถลดความซับซ้อนของโค้ดนี้ได้มาก (และถ้าไม่ใช่การมีองค์ประกอบที่มีชื่อเหมือนกับidองค์ประกอบอื่นไม่ใช่ความคิดที่ดี)

$('#dSuggest').keypress(function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

— lonesomeday
แหล่งที่มา

2

ใช้งานได้ แต่ด้วย jquery 2.x สิ่งนี้ล้าสมัยแล้วเนื่องจากคำตอบด้านล่างโดยใช้เปิดและอินพุตเป็นวิธีที่ดีที่สุดที่จะทำตอนนี้

— Piotr Kula

1

@ppumkin: เพียงเพราะ jQuery 2 ไม่ได้หมายความว่าผู้คนไม่จำเป็นต้องรองรับ IE8 หรือต่ำกว่า และฉันไม่เห็นสิ่งใดในเอกสารที่แนะนำการสนับสนุนจริงสำหรับinputประเภทเหตุการณ์

— คุกกี้มอนสเตอร์

7

คุณแก้ไขแล้วพวกเขาควรหยุดสนับสนุน IE ชี้ "วิธีแก้ปัญหา" ส่วนใหญ่ใน jQuery 1.x ใช้สำหรับ IE ดังนั้นจึงควรเปลี่ยนชื่อเป็น jQuerIE

— Piotr Kula

189

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

คุณควรใช้"input"เหตุการณ์แทนและลงทะเบียนด้วย.onวิธีการ ทำได้รวดเร็วโดยไม่ต้องล่าช้าkeyupและแก้ปัญหาการกดแป้นพิมพ์ล่าสุดที่ขาดหายไปตามที่คุณอธิบาย

$('#dSuggest').on("input", function() {
    var dInput = this.value;
    console.log(dInput);
    $(".dDimension:contains('" + dInput + "')").css("display","block");
});

สาธิตที่นี่

— เฟรดเดอ
แหล่งที่มา

26

ควรทำเครื่องหมายว่าเป็นคำตอบที่ถูกต้อง - การกดแป้นพิมพ์อาจช่วยแก้ปัญหาอักขระที่ขาดหายไปได้ แต่เป็นปัญหาในการพิจารณาว่ามีการเขียนอักขระจริงหรือไม่ (และคีย์ไม่ได้เป็นตัวอย่างเช่น "tab" หรือ "home") +1 สำหรับคุณ

— Nashi

ปัญหาคือเบราว์เซอร์รุ่นเก่าไม่รองรับและ IE9 ไม่ตอบสนองต่ออักขระที่ถูกลบ

— PhoneixS

33

ใช้.keyupแทนการกดแป้น

ใช้$(this).val()หรือเพียงthis.valueเพื่อเข้าถึงค่าอินพุตปัจจุบัน

สาธิตที่นี่

ข้อมูลเกี่ยวกับ.keypressเอกสาร jQuery

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

— Selvakumar Arumugam
แหล่งที่มา

5

keyupช้าเกินไปและสามารถกดปุ่มค้างไว้ได้โดยไม่ต้องปล่อยและสิ่งต่างๆจะต้องเกิดขึ้น ดีกว่าที่จะใช้keydownกับการหมดเวลาเล็กน้อยดังนั้นค่าจึงเปลี่ยนไป

— vsync

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

— vsync

5

คุณต้องขัดจังหวะเธรดการดำเนินการเพื่อให้อินพุตอัปเดต

  $(document).ready(function(event) {
       $("#dSuggest").keypress(function() {
           //Interrupt the execution thread to allow input to update
               setTimeout(function() {
                   var dInput = $('input:text[name=dSuggest]').val();
                   console.log(dInput);
                   $(".dDimension:contains('" + dInput + "')").css("display","block");
               }, 0);
       });
  });

— รัฐสภา
แหล่งที่มา

1

keyupการหน่วงเวลาช้าเกินไปสำหรับวัตถุประสงค์บางอย่างและยังไม่มีคีย์ตัวปรับแต่งตัวกรองอัตโนมัติ สิ่งนี้ใช้ได้ผลดีกว่าสำหรับฉัน

— Albert Bori

คำตอบที่ดีที่สุด การกดแป้น - ช้าและไม่สามารถจับอักขระเช่น @ ด้วยการกดสองปุ่ม

— Roma Rush

4

เนื่องจากKeypressเหตุการณ์ถูกเริ่มทำงานก่อนที่จะเพิ่มตัวละครใหม่ ใช้เหตุการณ์ 'keyup' แทนซึ่งจะทำงานได้ดีในสถานการณ์ของคุณ

$(document).ready(function() {
    $("#dSuggest").keyup(function() {
        var dInput = $('input:text[name=dSuggest]').val();
        console.log(dInput);
        $(".dDimension:contains('" + dInput + "')").css("display","block");
    });
});

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

$(document).ready(function() {
    $(".commoncss").keyup(function() {
        //your code
    });
});

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

— yogihosting
แหล่งที่มา

3

ฉันกำลังมองหาตัวอย่าง ES6 (เพื่อให้มันผ่านตัวฉันไปได้) ดังนั้นสำหรับคนอื่น ๆ ที่กำลังมองหาสิ่งเดียวกัน:

$('#dSuggest').keyup((e) => {
    console.log(e.currentTarget.value);
});

ฉันจะใช้คีย์อัพด้วยเพราะคุณได้รับค่าปัจจุบันที่กรอก

— MarvinVK
แหล่งที่มา

1

เพียงแค่ใช้การหมดเวลาเพื่อโทรออก การหมดเวลาจะถูกเรียกเมื่อกองซ้อนเหตุการณ์เสร็จสิ้น (เช่นหลังจากเรียกเหตุการณ์เริ่มต้นแล้ว)

$("body").on('keydown', 'input[type=tel]', function (e) {
    setTimeout(() => {
        formatPhone(e)
    }, 0)
});

— Smonge
แหล่งที่มา

0

ฉันคิดว่าสิ่งที่คุณต้องการคือต้นแบบด้านล่าง

$(element).on('input',function(){code})

— Zuckerberg
แหล่งที่มา

0

jQuery รับค่าอินพุตหลังจากกดแป้น

https://www.tutsmake.com/jquery-keypress-event-detect-enter-key-pressed/

i = 0;  
$(document).ready(function(){  
    $("input").keypress(function(){  
        $("span").text (i += 1);  
    });  
});

<!DOCTYPE html>  
<html>  
<head>  
<title>jQuery keyup() Method By Tutsmake Example</title> 
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>  
<body>  
Enter something: <input type="text">  
<p>Keypresses val count: <span>0</span></p>  
</body>  
</html>

ขยายข้อมูลโค้ด

— ผู้พัฒนา
แหล่งที่มา