亚洲乱码A∨一区二区三区,99re久久精品这里都是精品

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

鼠標(biāo)點(diǎn)擊輸入框時(shí)高亮顯示邊框顏色【jquery和css實(shí)現(xiàn)】

作者:admin 時(shí)間:2019-8-30 15:47:26 瀏覽:

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

突出顯示焦點(diǎn)上的邊框顏色

下面的代碼片段解釋了如何使用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>

說(shuō)明：

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

--focus (將在HTML控件具有焦點(diǎn)時(shí)應(yīng)用)

--blur (將在HTML控件失去焦點(diǎn)時(shí)應(yīng)用)

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

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

突出顯示焦點(diǎn)上的邊框顏色

execcode getcode

卡卡網(wǎng)

贊助商

分類目錄

贊助商

最新文章

搜索

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

鼠標(biāo)點(diǎn)擊輸入框時(shí)高亮顯示邊框顏色【jquery和css實(shí)現(xiàn)】

突出顯示焦點(diǎn)上的邊框顏色

相關(guān)文章

標(biāo)簽: css JQuery focus方法 blur方法