Question

我正在尝试使输入文本字段在焦点处于其周围时具有粗蓝色边框，然后在其不再处于焦点时默认返回其正常默认边框。我的一个输入字段定义如下：

<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">

当它处于焦点上时，这会正确地在其周围放置蓝色边框，但是当它不再处于焦点时，它会完全丢失默认文本字段。没有定义任何输入文本字段边框;他们的风格是这些领域的默认风格，我只想在失去焦点后让它恢复到这种风格。

Answer 1

css有一个：focus伪选择器，您可以将样式附加到。

input:focus { border:2px solid #036; }

另外，不要忘记使用正确的doctype。 <!DOCTYPE html>

Answer 2

不是直接使用JavaScript修改style属性，而是添加和删除类名，并使用CSS来定义类：

.newInputClass {
    border: 2px solid #003366;
}

而且，在HTML中：

<input onfocus="this.className = 'newInputClass';" onblur="this.className = '';" name="attorneyName" id="attorneyName" type="text" value="John Jackson" size="50" maxlength="30">

Answer 3

这是因为当您进行聚焦或“模糊”时，实际上是从文本框中删除整个样式，而不是将其恢复为默认值。

<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">

将blur语句设置为具有以下值。你想要一个border-style：inset;

border-style: inset; 
border-width: 2px;

希望这有帮助

Answer 4

试试这个：

的onblur = “this.style.border = '无';”

甚至更好地避免使用内联样式并交换类，如@David建议的那样。

HTML输入onfocus和onblur

4 个答案: