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

elisa.yang 發布于2019-08-22 11:13 / 1058人閱讀

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

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

select標簽和input標簽有區別

focus后變紅再恢復時，不好恢復到之前的帶有陰影的藍邊框

解決方案：

第一種寫法

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/92006.html

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

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

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

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

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

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

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

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

e10101 2019-08-28 18:21 評論0 收藏0
玩轉React樣式

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

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