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

elisa.yang 发布于2019-08-22 11:13 / 1010人阅读

摘要：控制输入框以红色作为验证提示，遇到两个问题标签和标签有区别后变红再恢复时，不好恢复到之前的带有阴影的蓝边框解决方案第一种写法第二种写法

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字体加粗变红

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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