HTML输入的onfocus和的onblur

我试图让输入文本字段周围有一个厚厚的蓝色边框时，它的重点，然后默认回到其正常的默认边框时，它不再是关注的焦点。我的一个输入字段的定义，像这样：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">

这正确把一个蓝色边框围绕它时，它是焦点，但是当它不再是重点，它完全失去了默认的文本字段。没有定义输入文本字段边界;他们的风格是这种领域的默认风格，我只是想在失去焦点后让它恢复到这种风格。

来源

2012-01-25 raphnguyen

而不是直接修改style属性和JavaScript，而不是添加和删除，一个类名，并使用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">

来源

2012-01-25 19:56:25

谢谢！这个建议完美运作。有没有办法做到这一点'选择'领域？ – raphnguyen

我不确定; 'select'元素大多由平台的操作系统来呈现，而不是浏览器本身。除非您使用样式列表或其他东西来复制'select'，否则它们大多不具风格。或者，至少，CSS不可靠。 –

谢谢。 'select'不是太重要，但是你知道一个方法可以用checkbox来做同样的事吗？现在，复选框周围会有一个边框，但该样式似乎会从默认样式变为焦点。 – raphnguyen

CSS有：重点伪选择器，您可以将样式。

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

此外，不要忘记使用正确的文档类型。 <!DOCTYPE html>

来源

2012-01-25 19:55:39 Tank

我一直没能得到'：focus'正确的IE8工作，它给了我很多头痛试图弄明白的。还是）感谢你的建议。 – raphnguyen

这就是为什么需要doctype声明。这使浏览器进入不同的渲染模式。如果您使用过渡性，那么大卫托马斯的解决方案将是最好的解决方法。 – Tank

啊，是的，我试着玩弄doctypes，总是会丢失页面的某些元素。有一件事会起作用，另一件事会被打破，所以我必须坚持过渡，并按照David的建议行事。感谢您的输入。 – raphnguyen

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

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

设置你的模糊语句具有以下值。你想要一个边框样式：插入;

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

希望这有助于

来源

2012-01-25 19:56:00 Downpour046

试试这个：

onblur =“this.style.border ='none';”

甚至更好的避免了内联样式和交换类作为@大卫建议。

来源

2012-01-25 19:56:37

这没有奏效，但@大卫的建议。谢谢您的帮助。 – raphnguyen

HTML输入的onfocus和的onblur

回答

相关问题