วิธีรับองค์ประกอบที่เน้นกับ jQuery

เมื่อใช้ jQuery ฉันจะได้รับองค์ประกอบอินพุตที่มีจุดโฟกัส (เคอร์เซอร์) ได้อย่างไร

หรือกล่าวอีกนัยหนึ่งว่าจะมีการป้อนข้อมูลอย่างไรหากมีโฟกัสของคาเร็ต?

// Get the focused element:
var $focused = $(':focus');

// No jQuery:
var focused = document.activeElement;

// Does the element have focus:
var hasFocus = $('foo').is(':focus');

// No jQuery:
elem === elem.ownerDocument.activeElement;

คุณควรใช้อันไหน อ้างถึงเอกสาร jQuery :

เช่นเดียวกับตัวเลือกคลาสหลอกอื่น ๆ (ตัวที่ขึ้นต้นด้วย ":") ขอแนะนำให้นำหน้า: โฟกัสด้วยชื่อแท็กหรือตัวเลือกอื่น ๆ ไม่เช่นนั้นตัวเลือกสากล ("*") จะบอกเป็นนัย ในคำอื่น ๆ เปลือย$(':focus')$('*:focus')เทียบเท่ากับ หากคุณกำลังมองหาองค์ประกอบที่มุ่งเน้นในปัจจุบัน $ (document.activeElement) จะดึงข้อมูลได้โดยไม่ต้องค้นหาแผนผัง DOM ทั้งต้น

คำตอบคือ:

document.activeElement

และถ้าคุณต้องการให้วัตถุ jQuery ห่อองค์ประกอบ:

$(document.activeElement)

$( document.activeElement )

จะดึงข้อมูลโดยไม่ต้องค้นหาแผนผัง DOM ทั้งต้นตามที่แนะนำในเอกสาร jQuery

ฉันทดสอบสองวิธีใน Firefox, Chrome, IE9 และ Safari

(1) $(document.activeElement)ทำงานได้ตามที่คาดไว้ใน Firefox, Chrome และ Safari

(2) $(':focus')ทำงานตามที่คาดไว้ใน Firefox และ Safari

ฉันย้ายไปที่เมาส์เพื่อป้อน 'ชื่อ' และกด Enter บนแป้นพิมพ์จากนั้นฉันพยายามหาส่วนประกอบที่โฟกัส

(1) $(document.activeElement)ส่งคืนอินพุต: ข้อความ: ชื่อตามที่คาดไว้ใน Firefox, Chrome และ Safari แต่จะส่งกลับอินพุต: ส่ง: addPassword ใน IE9

(2) $(':focus')ส่งคืนอินพุต: text: ชื่อตามที่คาดไว้ใน Firefox และ Safari แต่ไม่มีอะไรใน IE

<form action="">
    <div id="block-1" class="border">
        <h4>block-1</h4>
        <input type="text" value="enter name here" name="name"/>            
        <input type="button" value="Add name" name="addName"/>
    </div>
    <div id="block-2" class="border">
        <h4>block-2</h4>
        <input type="text" value="enter password here" name="password"/>            
        <input type="submit" value="Add password" name="addPassword"/>
    </div>
</form>

ลองสิ่งนี้:

$(":focus").each(function() {
    alert("Focused Elem_id = "+ this.id );
});

ไม่มีใครพูดถึงมันได้ยังไง ..

document.activeElement.id

ฉันใช้ IE8 และยังไม่ได้ทดสอบบนเบราว์เซอร์อื่น ในกรณีของฉันฉันใช้มันเพื่อให้แน่ใจว่ามีอย่างน้อย 4 ตัวอักษรและมุ่งเน้นไปที่การแสดงก่อน เมื่อคุณป้อนหมายเลขที่ 4 มันจะทริกเกอร์ ฟิลด์นี้มีรหัส 'ปี' ฉันใช้..

if( $('#year').val().length >= 4 && document.activeElement.id == "year" ) {
    // action here
}

$(':focus')[0] จะให้องค์ประกอบจริง

$(':focus') จะทำให้คุณมีองค์ประกอบมากมายโดยปกติจะมีเพียงองค์ประกอบเดียวเท่านั้นที่มุ่งเน้นในแต่ละครั้งดังนั้นจะเป็นการดีกว่าถ้าคุณมีองค์ประกอบหลายอย่างที่มุ่งเน้น

ลองนี้ ::

$(document).on("click",function(){
    alert(event.target);
    });

หากคุณต้องการยืนยันว่ามีการโฟกัสด้วยองค์ประกอบหรือไม่

if ($('#inputId').is(':focus')) {
    //your code
}