Question

我有一个像这样的HTML格式的文本框

'&lt input id="yourinput" type="text" &gt'

一旦用户在其中输入文本并移出，我想将边框设为1像素（因此它看起来不像普通文本字段）。

我实现了这个目标

$("#searchforstatus").css("border", "1px");

现在，当用户返回文本字段时，我想让文本字段看起来像原始的正常文本字段，其中包含退出值。

Answer 1

假设您希望input仅在包含值时看起来不同，我建议：

$(document).ready(
    function(){
        $('#textInput').blur(
            function(){
                if ($(this).val()) {
                    $(this).addClass('bordered');   
                }
            });
        $('#textInput').focus(
            function(){
                $(this).removeClass('bordered');  
            });
    });

在css文件中定义bordered css类（而不是使用css()在jQuery中添加/删除css属性），例如：

.bordered {
    border: 1px solid #f00;
}

Demo at JS Fiddle

Answer 2

这应该有效：

$("#searchforstatus").css("border", "");

看起来$("#searchforstatus").css("border", null)在1.4.3之前工作，但它实际上并没有真正有效：http://bugs.jquery.com/ticket/7233

Answer 3

// Add border when user enters text field
$("#yourinput").focus(function() {
    $(this).css("border", "1px");
});

// Remove border when user leaves text field
$("#yourinput").blur(function() {
    $(this).css("border", "0");
});

Answer 4

在CSS中严格执行，不要使用javascript，这就像使用锤子作为主食..

<style>
#searchforstatus{
border:none;
}


#searchforstatus:focus{
border:1px solid silver;
}

</style>

OR。使用border创建类：none和border; 1px并随意分配/取消分配它们。

Answer 5

$("#yourinput").focus(function() {
     $(this).css("border", "");
}

$("yourinput").blur(function() {
   if($(this).val() != "")
          $(this).css("border", "1px");
}

Answer 6

我认为最好和最简单的解决方案是：

$("#searchforstatus").css("border", "none");

Answer 7

如果您使用jquery mobile并且如果您为移动设备测试它，则需要在css文件中添加以下代码

textarea:focus, input:focus{
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);    
    -webkit-user-modify: read-write-plaintext-only;
}

这对我有用

如何从文本字段添加删除边框

7 个答案: