ในหน้าแรกของเว็บไซต์ที่ฉันกำลังสร้างหลายแห่ง<div>ใช้ CSS :hoverหลอกคลาสเพื่อเพิ่มเส้นขอบเมื่อเมาส์อยู่เหนือพวกเขา หนึ่งในนั้น<div>ประกอบด้วย a <form>ซึ่งใช้ jQuery จะเก็บขอบไว้หากอินพุตภายในนั้นมีโฟกัส มันทำงานได้อย่างสมบูรณ์ยกเว้นว่า IE6 ไม่รองรับ:hoverองค์ประกอบอื่นที่ไม่ใช่<a>s ดังนั้นสำหรับเบราว์เซอร์นี้เราเท่านั้นที่ใช้ jQuery เพื่อเลียนแบบ CSS :hoverโดยใช้$(#element).hover()เมธอด ปัญหาเดียวคือตอนนี้ที่ jQuery จัดการทั้งแบบฟอร์มfocus() และ hover()เมื่ออินพุตมีการโฟกัสผู้ใช้จะย้ายเมาส์เข้าและออกเส้นขอบจะหายไป

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

jQuery 1.6+

jQuery เพิ่ม:focusตัวเลือกดังนั้นเราไม่จำเป็นต้องเพิ่มตัวเราเองอีกต่อไป เพียงแค่ใช้$("..").is(":focus")

jQuery 1.5 และต่ำกว่า

แก้ไข:เมื่อมีการเปลี่ยนแปลงเราพบวิธีที่ดีกว่าสำหรับการทดสอบการโฟกัสรายการโปรดใหม่คือส่วนสำคัญจาก Ben Alman :

jQuery.expr[':'].focus = function( elem ) {
  return elem === document.activeElement && ( elem.type || elem.href );
};

ยกมาจาก Mathias Bynens ที่นี่ :

โปรดทราบว่ามี(elem.type || elem.href)การเพิ่มการทดสอบเพื่อกรองผลบวกปลอมเช่นร่างกาย ด้วยวิธีนี้เราตรวจสอบให้แน่ใจว่าได้กรององค์ประกอบทั้งหมดยกเว้นตัวควบคุมฟอร์มและไฮเปอร์ลิงก์แล้ว

คุณกำลังกำหนดตัวเลือกใหม่ ดูปลั๊กอิน / เขียน จากนั้นคุณสามารถทำได้:

if ($("...").is(":focus")) {
  ...
}

หรือ:

$("input:focus").doStuff();

jQuery ใด ๆ

หากคุณเพียงต้องการทราบว่าองค์ประกอบใดมีโฟกัสคุณสามารถใช้

$(document.activeElement)

หากคุณไม่แน่ใจว่าเวอร์ชั่นนั้นจะเป็น 1.6 หรือต่ำกว่านั้นคุณสามารถเพิ่ม:focusตัวเลือกได้หากมันหายไป:

(function ( $ ) {
    var filters = $.expr[":"];
    if ( !filters.focus ) { 
        filters.focus = function( elem ) {
           return elem === document.activeElement && ( elem.type || elem.href );
        };
    }
})( jQuery );

CSS:

.focus {
    border-color:red;
}

JQuery:

  $(document).ready(function() {

    $('input').blur(function() {
        $('input').removeClass("focus");
      })
      .focus(function() {
        $(this).addClass("focus")
      });
  });

นี่คือคำตอบที่มีประสิทธิภาพมากกว่าคำตอบที่ยอมรับในปัจจุบัน:

jQuery.expr[':'].focus = function(elem) {
  return elem === document.activeElement && (elem.type || elem.href);
};

โปรดทราบว่าการทดสอบถูกบันทึกอยู่ในกรองบวกเท็จเช่น(elem.type || elem.href) bodyด้วยวิธีนี้เราตรวจสอบให้แน่ใจว่าได้กรององค์ประกอบทั้งหมดยกเว้นตัวควบคุมฟอร์มและไฮเปอร์ลิงก์แล้ว

(นำมาจากส่วนสำคัญนี้โดยBen Alman )

อัปเดตเมษายน 2558

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

ในสถานที่ที่.onวิธีการได้รับการแนะนำในขณะนี้

เอกสารของพวกเขาค่อนข้างมีประโยชน์ในการอธิบายวิธีการทำงาน

วิธีการ. on () แนบตัวจัดการเหตุการณ์กับชุดองค์ประกอบที่เลือกในปัจจุบันในวัตถุ jQuery ตั้งแต่ jQuery 1.7 เมธอด. on () จัดเตรียมการทำงานทั้งหมดที่จำเป็นสำหรับการแนบตัวจัดการเหตุการณ์ สำหรับความช่วยเหลือในการแปลงจากวิธีเหตุการณ์ jQuery ที่เก่ากว่าดู. ผูก (), .delegate () และ. live ()

ดังนั้นเพื่อให้คุณกำหนดเป้าหมายเหตุการณ์ 'อินพุตที่มุ่งเน้น' คุณสามารถใช้สิ่งนี้ในสคริปต์ สิ่งที่ต้องการ:

$('input').on("focus", function(){
   //do some stuff
});

มันค่อนข้างแข็งแกร่งและยังช่วยให้คุณสามารถใช้ปุ่ม TAB ได้เช่นกัน

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

$('div').each(function(){

    var childInputHasFocus = false;

    $(this).hover(function(){
        if (childInputHasFocus) {
            // do something
        } else { }
    }, function() {
        if (childInputHasFocus) {
            // do something
        } else { }
    });

    $('input', this)
        .focus(function(){
            childInputHasFocus = true;
        })
        .blur(function(){
            childInputHasFocus = false;
        });
});

อีกทางเลือกหนึ่งในการใช้คลาสเพื่อทำเครื่องหมายสถานะขององค์ประกอบคือฟังก์ชันการทำงานของที่เก็บข้อมูลภายในฟังก์ชั่นการจัดเก็บข้อมูล

PS: คุณสามารถเก็บบูลีนและสิ่งที่คุณต้องการโดยใช้data()ฟังก์ชั่น มันไม่ได้เกี่ยวกับสตริง :)

$("...").mouseover(function ()
{
    // store state on element
}).mouseout(function ()
{
    // remove stored state on element
});

แล้วมันเป็นเพียงเรื่องของการเข้าถึงสถานะขององค์ประกอบ

ถ้าใครสนใจก็มีวิธีที่ดีกว่าในการจับโฟกัสในตอนนี้ $(foo).focus(...)

http://api.jquery.com/focus/

คุณมีความคิดเกี่ยวกับการใช้mouseOverและmouseOutเพื่อจำลองสิ่งนี้ ดูที่mouseEnterและmouseLeave ด้วย

ติดตามสถานะทั้งสอง (โฮเวอร์, โฟกัส) เป็นแฟล็กจริง / เท็จและเมื่อใดก็ตามที่มีการเปลี่ยนแปลงให้เรียกใช้ฟังก์ชันที่ลบเส้นขอบหากทั้งสองเป็นเท็จมิฉะนั้นจะแสดงเส้นขอบ

ดังนั้น: onfocus sets focus = true, onblur ตั้งค่า focus = false onmouseover sets hovered = true, onmouseout sets hovered = false หลังจากแต่ละเหตุการณ์เหล่านี้เรียกใช้ฟังก์ชันที่เพิ่ม / ลบเส้นขอบ

เท่าที่ฉันรู้คุณไม่สามารถถามเบราว์เซอร์ว่าอินพุตใด ๆ บนหน้าจอมีโฟกัสคุณต้องตั้งค่าการติดตามโฟกัส

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

ฉันมีคลาส MooTools ที่จัดการสิ่งนี้ได้อย่างง่ายดายฉันแน่ใจว่าคุณสามารถสร้างปลั๊กอิน jquery เพื่อทำสิ่งเดียวกันได้

เมื่อสร้างแล้วคุณสามารถตรวจสอบ noFocus ก่อนทำการสลับขอบใด ๆ

ไม่มี: โฟกัส แต่มี: เลือก http://docs.jquery.com/Selectors/selected

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

http://docs.jquery.com/Events/blur

มีปลั๊กอินเพื่อตรวจสอบว่าองค์ประกอบเน้นหรือไม่: http://plugins.jquery.com/project/focused

$('input').each(function(){
   if ($(this) == $.focused()) {
      $(this).addClass('focused');
   }
})

ฉันมีชุดกิจกรรม. live ("โฟกัส") เพื่อเลือก () (เน้น) เนื้อหาของการป้อนข้อความเพื่อที่ผู้ใช้จะไม่ต้องเลือกก่อนพิมพ์ค่าใหม่

$ (formObj) .Select ();

เนื่องจากนิสัยใจคอระหว่างเบราว์เซอร์ที่แตกต่างกันบางครั้งการเลือกจะถูกแทนที่ด้วยการคลิกที่ทำให้เกิดและมันจะยกเลิกการเลือกเนื้อหาทันทีหลังจากที่วางเคอร์เซอร์ในช่องข้อความ (ทำงานส่วนใหญ่ตกลงใน FF แต่ล้มเหลวใน IE)

ฉันคิดว่าฉันสามารถแก้ปัญหานี้ได้โดยเลือกความล่าช้าเล็กน้อย ...

setTimeout (ฟังก์ชั่น () {$ (formObj) .Select ();}, 200);

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

วิธีแก้ปัญหาที่สามารถใช้งานได้คือการตรวจสอบว่าเขตข้อมูลนั้นยังคงมีโฟกัสอยู่ก่อนที่จะดำเนินการเลือก () แต่ตามที่กล่าวไว้ไม่มีวิธีง่ายๆในการตรวจสอบ ... ฉันลงเอยด้วยการจ่ายด้วยไฮไลท์อัตโนมัติทั้งหมด jQuery select () เดียวเรียกใช้ฟังก์ชันขนาดใหญ่ที่มีรูทีนย่อย ...

สิ่งที่ฉันทำตอนนี้คือการสร้างคลาสโดยพลการที่เรียกว่า. องค์ประกอบการโฟกัสซึ่งถูกเพิ่มและลบออกภายในฟังก์ชัน jQuery focus () เมื่อฟังก์ชันโฮเวอร์ () ทำงานโดยเลื่อนเมาส์ออกจะเป็นการตรวจสอบ. องค์ประกอบการโฟกัส:

if(!$("#quotebox").is(".boxhasfocus")) $(this).removeClass("box_border");

ดังนั้นหากไม่มีคลาสนั้น (อ่าน: ไม่มีองค์ประกอบภายใน div มีโฟกัส) เส้นขอบจะถูกลบออก มิฉะนั้นจะไม่มีอะไรเกิดขึ้น

ง่าย

 <input type="text" /> 



 <script>
     $("input").focusin(function() {

    alert("I am in Focus");

     });
 </script>