jQuery 如何从文本字段中添加删除边框
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4229511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to add remove border from text field
提问by prashant
I have a text box in html form like this
我有一个像这样的 html 形式的文本框
'< input id="yourinput" type="text" >'
Once user enters text in it and moves out i want to make the border to 1 px (so that it does not look like a normal text field). I achieve this by
一旦用户在其中输入文本并移出，我想将边框设置为 1 像素（使其看起来不像普通文本字段）。我通过
$("#searchforstatus").css("border", "1px");
Now, when the user comes back to the text field, i want to make the text field look like original normal looking text field with the exiting value in it.
现在，当用户回到文本字段时，我想让文本字段看起来像原始正常外观的文本字段，其中包含现有值。
回答by David says reinstate Monica
Assuming that you want the inputto look different only when it contains a value, I'd suggest this:
假设您希望input只有当它包含一个值时才看起来不同，我建议这样做：
$(document).ready(
function(){
$('#textInput').blur(
function(){
if ($(this).val()) {
$(this).addClass('bordered');
}
});
$('#textInput').focus(
function(){
$(this).removeClass('bordered');
});
});
And define the borderedcss class in the css file (rather than adding/removing css properties in jQuery with css()), for example:
并bordered在 css 文件中定义css 类（而不是在 jQuery 中添加/删除 css 属性css()），例如：
.bordered {
border: 1px solid #f00;
}
回答by Emmett
This should work:
这应该有效：
$("#searchforstatus").css("border", "");
It looks like $("#searchforstatus").css("border", null)worked prior to 1.4.3, but it wasn't ever actually valid: http://bugs.jquery.com/ticket/7233
它看起来$("#searchforstatus").css("border", null)在 1.4.3 之前有效，但实际上从未有效：http: //bugs.jquery.com/ticket/7233
回答by Marko
// 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");
});
回答by FatherStorm
do it strictly in the CSS, don't use javascript for it, that's like using a hammer for a staple..
严格在 CSS 中执行，不要使用 javascript，就像用锤子做订书钉一样。
<style>
#searchforstatus{
border:none;
}
#searchforstatus:focus{
border:1px solid silver;
}
</style>
OR. create classes with border:none and border;1px and assign/unassign them at will.
或者。创建带有 border:none 和 border;1px 的类，并随意分配/取消分配它们。
回答by jwegner
$("#yourinput").focus(function() {
$(this).css("border", "");
}
$("yourinput").blur(function() {
if($(this).val() != "")
$(this).css("border", "1px");
}
回答by AFetter
I think the best and simple solution is:
我认为最好和最简单的解决方案是：
$("#searchforstatus").css("border", "none");
回答by Karthik Sivakumar
If you use jquery mobile and if you test it for mobile you need to add the following code in your css file
如果您使用 jquery mobile 并且在移动设备上对其进行测试，则需要在 css 文件中添加以下代码
textarea:focus, input:focus{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-webkit-user-modify: read-write-plaintext-only;
}
It is working for me
它对我有用
