HTML 输入 onfocus 和 onblur
我试图让输入文本字段在聚焦时周围有一个厚蓝色边框，然后在不再聚焦时默认返回到正常的默认边框。我的一个输入字段的定义如下：
<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
当它处于焦点时，它会正确地在它周围放置一个蓝色边框，但是当它不再处于焦点时，它会完全丢失默认的文本字段。未定义任何输入文本字段边框；它们的样式是此类字段的默认样式，我只是想让它在失去焦点后恢复到这种样式。
I am trying to get an input text field to have a thick blue border around it when it is in focus and then to default back to its normal default border when it is no longer in focus. One of my input fields is defined like so:
<input onfocus="this.style.border='2px solid #003366';" onblur="this.style.border='';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">
This correctly puts a blue border around it when it is on focus, but when it is no longer in focus, it loses the default text field altogether. None of the input text field borders are defined; their style is the default style for such fields and I would simply like to make it revert to this style after it loses focus.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
css 有一个 :focus psuedo 选择器，您可以将样式附加到其中。
另外，不要忘记使用正确的文档类型。
css has a :focus psuedo selector which you can attach styles to.
Also, don't forget to use the right doctype.
<!DOCTYPE html>不要使用 JavaScript 直接修改
style属性，而是添加和删除类名，并使用 CSS 定义类：并且在 HTML 中：
Instead of directly modifying the
styleattribute with the JavaScript, instead add, and remove, a class-name, and use CSS to define the class:And, in the HTML:
这是因为当您聚焦或“模糊”时，您实际上是从文本框中删除整个样式，而不是将其恢复为默认值。
将模糊语句设置为具有以下值。你想要一个边框样式： inset;
希望这有帮助
This is because when you are focusing out or "blurring", you are actually removing the entire style from the text box, not reverting it back to its default.
Set your blur statement to have the following values. You want a border-style: inset;
Hope this helps
试试这个：
onblur="this.style.border='none';"
或者更好地避免内联样式并按照 @David 的建议交换类。
Try this:
onblur="this.style.border='none';"
or even better avoid the inline styles and swap a class as @David suggests.