JS控制輸入框外邊框focus后變紅

elisa.yang 發(fā)布于2019-08-22 11:13 / 1047人閱讀

摘要：控制輸入框以紅色作為驗(yàn)證提示，遇到兩個(gè)問(wèn)題標(biāo)簽和標(biāo)簽有區(qū)別后變紅再恢復(fù)時(shí)，不好恢復(fù)到之前的帶有陰影的藍(lán)邊框解決方案第一種寫(xiě)法第二種寫(xiě)法

JS控制輸入框以紅色作為驗(yàn)證提示，遇到兩個(gè)問(wèn)題：

select標(biāo)簽和input標(biāo)簽有區(qū)別
focus后變紅再恢復(fù)時(shí)，不好恢復(fù)到之前的帶有陰影的藍(lán)邊框

解決方案：

第一種寫(xiě)法

function focusChangeBorder( id ) {
    var editElem = $("#" + id);
    if (editElem.children("#" + id).length>0) {
        editElem = editElem.children("#" + id);
    }
    editElem.blur(function () {
        $(this).css({
            "outline": "5px auto -webkit-focus-ring-color",
            "border-color": "rgba(82, 168, 236, 0.8)"
        });
        $(this).css({
            "outline": "none",
            "border-color": "#ccc"
        });           
    }).focus(function () {
        $(this).css({
            "outline": "none",
            "border-color": "rgba(255, 0, 0, 0.8)"
        });
    });
    editElem.focus();
}

第二種寫(xiě)法

var focusChangeBorder = function ( id ) {
    //var elem = $( "input#" + id );
    //if (elem.length <= 0) {
    //    elem = $("#" + id);
    //}
    var elem = $( "input,select,option,textarea" ).filter( "#" + id );
    
    elem.blur( function () {
        elem.focus( function () {
            $( this ).css( {
                "outline": "5px auto -webkit-focus-ring-color",
                "border-color": "rgba(82, 168, 236, 0.8)"
            } );
        } );
        $( this ).css( {
            "outline": "none",
            "border-color": "#ccc"
        } );
    } ).focus( function () {
        $( this ).css( {
            "outline": "none",
            "border-color": "rgba(255, 0, 0, 0.8)"
        } );
    } );
    elem.focus();
}

GPU云服務(wù)器云服務(wù)器 js 輸入金額控制 js.focus() html橢圓輸入邊框 js字體加粗變紅

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/92006.html

相關(guān)文章

【踩坑】近來(lái)在Firefox上遇到的一些坑

摘要：最近在幫人解決下的一些兼容問(wèn)題。驗(yàn)證不通過(guò)的話，輸入框會(huì)加上紅色的邊框。然后妹紙?jiān)诿枋鲋姓f(shuō)的是瀏覽器中，修改密碼頁(yè)面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫(xiě)得不對(duì)呢。最后發(fā)現(xiàn)，輸入框好像都帶了個(gè)屬性。因?yàn)楣ぷ饕荒甓嘁詠?lái)，做的工作基本都是和webkit系列打交道。先是做m站，后來(lái)做了兩個(gè)app內(nèi)嵌的hybrid項(xiàng)目，從來(lái)只考慮webkit前綴和相關(guān)的偽類(lèi)。最...

JaysonWang 2019-08-30 12:49 評(píng)論0 收藏0
【踩坑】近來(lái)在Firefox上遇到的一些坑

摘要：最近在幫人解決下的一些兼容問(wèn)題。驗(yàn)證不通過(guò)的話，輸入框會(huì)加上紅色的邊框。然后妹紙?jiān)诿枋鲋姓f(shuō)的是瀏覽器中，修改密碼頁(yè)面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫(xiě)得不對(duì)呢。最后發(fā)現(xiàn)，輸入框好像都帶了個(gè)屬性。因?yàn)楣ぷ饕荒甓嘁詠?lái)，做的工作基本都是和webkit系列打交道。先是做m站，后來(lái)做了兩個(gè)app內(nèi)嵌的hybrid項(xiàng)目，從來(lái)只考慮webkit前綴和相關(guān)的偽類(lèi)。最...

AJie 2019-08-01 15:06 評(píng)論0 收藏0
實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時(shí)外邊框變藍(lán)

摘要：背景之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。背景之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。突然某一天，產(chǎn)品覺(jué)得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外...

Coding01 2019-08-21 10:44 評(píng)論0 收藏0
實(shí)現(xiàn)"輸入框"獲得焦點(diǎn)時(shí)外邊框變藍(lán)

摘要：背景之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。而且輸入框的邊框設(shè)置在了父元素上，所有當(dāng)輸入框獲得焦點(diǎn)時(shí)，看到的應(yīng)該是父元素上的邊框變藍(lán)，而不是里面的的邊框變藍(lán)。背景之前做了一個(gè)網(wǎng)頁(yè)，網(wǎng)頁(yè)中的所有輸入框都被設(shè)計(jì)為獲得鼠標(biāo)焦點(diǎn)時(shí)外邊框不變藍(lán)。突然某一天，產(chǎn)品覺(jué)得這樣用戶體驗(yàn)不好，不能很明顯地告訴用戶當(dāng)前鼠標(biāo)停在哪里，于是要求改為當(dāng)輸入框獲得鼠標(biāo)焦點(diǎn)時(shí)，外...

e10101 2019-08-28 18:21 評(píng)論0 收藏0
玩轉(zhuǎn)React樣式

摘要：里面的元素可以分為兩類(lèi)，一個(gè)是和后面的輸入框，另一類(lèi)是提交按鈕。就是我們定義的樣式對(duì)象。比如，我現(xiàn)在想要定制不同的用戶名密碼輸入框的邊框顏色。根據(jù)不同的狀態(tài)顯示不同顏色的文本輸入框有兩種狀態(tài)，和。方法就會(huì)根據(jù)不同的狀態(tài)返回不同的樣式。很久很久以前，就有人用CSS來(lái)時(shí)給HTML內(nèi)容添加樣式。CSS可以最大限度的分離樣式和內(nèi)容，選擇器也可以很方便的給某些元素添加樣式。你根本找不到任何不用...

scq000 2019-08-29 11:16 評(píng)論0 收藏0