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

Posted 2023-04-14

【中文标题】如何从文本字段中添加删除边框

【英文标题】：How to add remove border from text field

【发布时间】：2010-11-19 21:25:26

【问题描述】：

我有一个像这样的 html 形式的文本框

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

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

实现了这一点

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

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

【问题讨论】：

***.com/questions/576319/…的可能重复

【参考方案1】：

假设您希望 input 仅在它包含一个值时看起来不同，我建议这样做：

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

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

.bordered 
    border: 1px solid #f00;

Demo at JS Fiddle.

【参考方案2】：

这应该有效：

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

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

【参考方案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");
);

【参考方案4】：

严格在 CSS 中做，不要使用 javascript，这就像用锤子钉钉子一样..

<style>
#searchforstatus
border:none;



#searchforstatus:focus
border:1px solid silver;


</style>

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

【参考方案5】：

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


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

【参考方案6】：

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

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

【参考方案7】：

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

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

它对我有用