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

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

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

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

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

解決方案：

第一種寫法

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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

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

相關(guān)文章

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

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

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

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

AJie 2019-08-01 15:06 評(píng)論0 收藏0
【jQuery插件分享】Cropper——一個(gè)簡(jiǎn)單方便的圖片裁剪插件

摘要：在裁剪框外拖動(dòng)鼠標(biāo)會(huì)生成一個(gè)新的裁剪框。這個(gè)是裁剪框的縱橫比，默認(rèn)是不限制的。初始化完成后是否自動(dòng)顯示裁剪框自動(dòng)顯示的裁剪框的大小。方法的使用格式為手動(dòng)顯示裁剪框。插件介紹這是一個(gè)我在寫以前的項(xiàng)目的途中發(fā)現(xiàn)的一個(gè)國人寫的jQuery圖像裁剪插件，當(dāng)時(shí)想實(shí)現(xiàn)用戶資料的頭像上傳功能，并且能夠預(yù)覽圖片，和對(duì)圖片進(jìn)行簡(jiǎn)單的裁剪、旋轉(zhuǎn)，花了不少時(shí)間才看到了這個(gè)插件，感覺功能挺全面，代碼實(shí)現(xiàn)起...

阿羅 2019-08-21 17:58 評(píng)論0 收藏0
用原生js寫出一個(gè)彈框+遮罩層的頁面,完成彈框垂直居中頁面且點(diǎn)擊彈框外任何區(qū)域去掉彈框和遮罩層的功能

摘要：背景官網(wǎng)有個(gè)對(duì)話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個(gè)頁面寫一年目標(biāo)用原生完成這個(gè)頁面彈框處于垂直居中狀態(tài)且點(diǎn)擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r(shí)間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還背景:Ant官網(wǎng)有個(gè)對(duì)話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

betacat 2019-08-30 15:44 評(píng)論0 收藏0
用原生js寫出一個(gè)彈框+遮罩層的頁面,完成彈框垂直居中頁面且點(diǎn)擊彈框外任何區(qū)域去掉彈框和遮罩層的功能

摘要：背景官網(wǎng)有個(gè)對(duì)話框組件如圖如果哪天不能用框架了不能用組件了只能用原生寫頁面現(xiàn)在的我可能要一個(gè)頁面寫一年目標(biāo)用原生完成這個(gè)頁面彈框處于垂直居中狀態(tài)且點(diǎn)擊彈框外任意區(qū)域關(guān)閉彈框?qū)懥撕芫煤芫脮r(shí)間就不說了遇到的最難的問題就是不知道怎么關(guān)閉彈框后面還背景:Ant官網(wǎng)有個(gè)對(duì)話框Model組件.如圖: showImg(https://segmentfault.com/img/bVbwMCG?w=1...

CoderDock 2019-08-26 10:59 評(píng)論0 收藏0