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

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

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

JS控制輸入框以紅色作為驗證提示，遇到兩個問題：

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

解決方案：

第一種寫法

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();
}

第二種寫法

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();
}

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

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

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92006.html

相關(guān)文章

【踩坑】近來在Firefox上遇到的一些坑

摘要：最近在幫人解決下的一些兼容問題。驗證不通過的話，輸入框會加上紅色的邊框。然后妹紙在描述中說的是瀏覽器中，修改密碼頁面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫得不對呢。最后發(fā)現(xiàn)，輸入框好像都帶了個屬性。因為工作一年多以來，做的工作基本都是和webkit系列打交道。先是做m站，后來做了兩個app內(nèi)嵌的hybrid項目，從來只考慮webkit前綴和相關(guān)的偽類。最...

JaysonWang 2019-08-30 12:49 評論0 收藏0
【踩坑】近來在Firefox上遇到的一些坑

摘要：最近在幫人解決下的一些兼容問題。驗證不通過的話，輸入框會加上紅色的邊框。然后妹紙在描述中說的是瀏覽器中，修改密碼頁面，輸入框中不輸入任何字符，輸入框顏色也是紅的我還以為又是哪里的寫得不對呢。最后發(fā)現(xiàn)，輸入框好像都帶了個屬性。因為工作一年多以來，做的工作基本都是和webkit系列打交道。先是做m站，后來做了兩個app內(nèi)嵌的hybrid項目，從來只考慮webkit前綴和相關(guān)的偽類。最...

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

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

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

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

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

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

scq000 2019-08-29 11:16 評論0 收藏0