突出顯示網絡表單上的“當前”文本框

Question

我有一個數據輸入Web應用程序，其中具有焦點的控件具有黃色背景色（當用戶導航離開時，它變回白色）。 執行此操作的腳本來自I-not-know-where，它在IE7中中斷，導致各種問題，例如下拉菜單無法正常工作（該腳本旨在在文本框和下拉菜單上運行，或者至少可以在下拉菜單中使用）的實現考慮到了這一點），並且可以在ie6中使用。

我的一些用戶已在不通知我的情況下切換到IE7，其余用戶將在將來的某個時間轉到IE7。 因此，我想實施一個更友好的解決方案。 我真的很喜歡jquery，並且已經在應用程序中使用它進行各種操作。 另外，已經建議跨瀏覽器支持在Intranet上可能/最終將很重要。

我更希望避免的是向控件中手動添加一堆onblur =“ SomeMethod（）”（或類似的東西）（應用程序中必須有600+）。 實際上，如果我告訴老板，他可能會向我扔東西。

我已經在應用程序中使用了JQuery。 使用函數的地方是顯式的，並且全部在onblur中調用。

目前，我很想做這樣的事情：

$(document).ready (function( 
    $(':text').focus(function() 
    { 
        //Do Highlighting
    }

    $(':text').blur(function()
    {
        //Good bye highlighting
    }
)

1. 我在他的正確軌道上嗎？ onblur是我最好的選擇嗎？ 有沒有更好的辦法？
2. 其他onblur函數根據父級的值顯示/隱藏子級字段。 我意識到我沒有提供代碼，但是我是否准備好應對任何沖突？

Answer 1

使用jQuery的blur（）和focus（）方法。

另外，我認為您的意思是使用模糊功能刪除突出顯示（模糊表示用戶已單擊有問題的元素）。 使用focus（）打開突出顯示。

$(document).ready (function() {
    $(':text').focus(function() { 
        $(this).addClass('highlight');
    });
    $(':text').blur(function() { 
        $(this).removeClass('highlight');
    });
});

Answer 2

似乎有一種解決方法可以使：focus偽類在IE6 / 7中工作。 我自己沒有使用過，但我認為這是一個既定的解決方案：

http://www.xs4all.nl/~peterned/csshover.html

使用600多個元素時，最好采用無腳本的解決方法，尤其是在涉及較舊的客戶端的情況下。

Answer 3

$('textarea, input:text').focus(function() {
     $(this).addClass('hilite');
}).blur(function() {
     $(this).removeClass('hilite')
});

.hilite {
  border: 2px solid gray;
}

Answer 4

模糊/對焦將為您工作。 如果您能夠在某個時候將所有用戶一直遷移到IE8，則還可以使用CSS達到預期的效果：

input[type=text]:focus { 
    background-color: lightyellow; 
}

Answer 5

有一個免費的小部件庫可用於此任務： 焦點突出小部件 。

Answer 6

這不會回答您的問題，但是是替代方法。jQuery Tools Expose將對輸入框外的所有元素應用覆蓋，從而迫使用戶將注意力集中在輸入上。 這是一個很好的功能，該插件非常輕巧。 如果您不想使用插件，我還會在此答案中發布一些功能相同的代碼。