国产在线观看不卡,国产精品992TV在线观看

技術(shù)頻道 - js技術(shù)

鼠標點擊輸入框時高亮顯示邊框顏色【jquery和css實現(xiàn)】

作者:admin 時間:2019-8-30 15:47:26 瀏覽:

這里解釋如何突出顯示表單字段的邊框顏色、背景顏色等，如焦點上的HTML輸入文本框、輸入密碼、選擇下拉菜單和文本區(qū)域，并在失去焦點時使用jquery和css使它們正常。

突出顯示焦點上的邊框顏色

下面的代碼片段解釋了如何使用jquery和css突出顯示表單字段，如HTML輸入文本框、輸入密碼、選擇下拉列表和文本區(qū)域。

<html>
<head>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<style type = "text/css">
.focus{border: 1px solid #FFB000;outline: none;}
.blur{border: 1px solid #CCCCCC;outline: none;}
</style>
</head>
<body>
<form>

<script type = "text/javascript">
$(function () {
$("input[type=text], input[type=password], textarea, select").each(function () {
    $(this).addClass("blur");
    $(this).focus(function () {
      $(this).removeClass("blur").addClass("focus");
    });
    $(this).blur(function () {
      $(this).removeClass("focus").addClass("blur");
    });
});
});
</script>
TextBox: <input type = "text" /><br /><br />
Password: <input type = "password" /><br /><br />
Textarea: <textarea cols = "15" rows = "3"></textarea><br /><br />
Select:
<select>
<option>Please select</option>
<option>Female</option>
<option>Male</option>
</select>
</form>
</body>
</html>

說明：

上面在head部分的樣式標簽中創(chuàng)建了兩個css類。

--focus (將在HTML控件具有焦點時應用)

--blur (將在HTML控件失去焦點時應用)

接下來，將在頁面的加載事件中對所有表單字段 (input[type=text]，input[type=password]，textarea，select) 執(zhí)行循環(huán)。在循環(huán)中，將焦點和模糊事件附加到HTML表單字段。在這些事件中，簡單地添加和移除焦點和模糊CSS類，以便當控件聚焦時突出顯示它，當它失去焦點時，它應該恢復正常。

上面的CSS只更改邊框的顏色。但您可以根據(jù)需要修改它，只需編輯這兩個CSS類即可。

突出顯示焦點上的邊框顏色

execcode getcode

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

技術(shù)頻道 - js技術(shù)

鼠標點擊輸入框時高亮顯示邊框顏色【jquery和css實現(xiàn)】

突出顯示焦點上的邊框顏色

相關(guān)文章

標簽: css JQuery focus方法 blur方法