美文网首页
JS控制输入框外边框focus后变红

JS控制输入框外边框focus后变红

作者: sanyuesiyuewuyu | 来源:发表于2017-10-31 11:16 被阅读0次

    JS控制输入框以红色作为验证提示,遇到两个问题:

    1. select标签和input标签有区别
    2. focus后变红再恢复时,不好恢复到之前的带有阴影的蓝边框

    解决方案:

    1. 第一种写法
    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();
    }
    
    
    
    1. 第二种写法
    
    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();
    }  
    
    

    相关文章

      网友评论

          本文标题:JS控制输入框外边框focus后变红

          本文链接:https://www.haomeiwen.com/subject/cdtbpxtx.html