表单域：如何更改模糊背景？答案

【问题标题】：Form Field: How do I change the background on blur?表单域：如何更改模糊背景？
【发布时间】：2011-01-09 19:38:45
【问题描述】：

当用户点击该字段时，我设法删除了背景，但当它模糊时我无法恢复它！

这是字段：

       <textarea class="question-box" style="width: 240px; background: 
    white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 
    50% 50%; color: grey;" cols="12" rows="5"  id="question-box-' . 
    $questionformid . '" name="title" onblur="if(this.value == '') { 
    this.style.color='#848484'; this.style.background='
white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%';}" 
    onfocus="if (this.value == '') {this.style.color='#444'; 
    this.style.background='none';}" type="text" maxlength="200" size="28"></textarea>

谁知道我做错了什么？？谢谢

【问题讨论】：

标签： javascript css forms styles

【解决方案1】：

除非您主要需要支持 IE6/7，否则不要再用 JavaScript 来解决可以用 CSS 解决的问题：

textarea.question-box {
    width: 240px; 
    background: white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%; 
    color: grey;
}
textarea.question-box:focus {
    color: #444; 
    background: none;
}

如果您确实需要支持 IE6/7，或者 IE 处于兼容或 quirks 模式，请尝试one of the bolt on solutions 已经可用。

【讨论】：

【解决方案2】：

我很确定问题出在 this.value=''this.style.background=' 部分。你需要一个分号。当用户点击它时，您真的要将该值设置回空白吗？

【讨论】：

是的，图片只是为了引起注意。我需要在哪里添加分号？？

【解决方案3】：

 onblur="if(this.value == '') { 
        this.style.color='#848484'; this.value=''this.style.background='
    white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%;

你在这行后面有“E”字符，这一定是你的问题。

无论如何，要切换元素的背景，请使用 onfocus 和 onblur 事件

onfocus="var a = 'url(\'http://chusmix.com/Imagenes/form-focused.png\') repeat scroll 0 0 white'; this.style.background=a; return false;"

onblur="var a = 'url(\'http://chusmix.com/Imagenes/form-normal.png\') repeat scroll 0 0 white'; this.style.background=a; return false;"

【讨论】：

谢谢，我删除了这个角色，但它仍然不起作用。我也尝试了你的 onblur 并没有工作。无论如何，我的 onfocus 正在工作，只是 onblur 没有。它应该重新打开背景。嗯还有其他想法吗？？还是谢谢
真的很奇怪，但我建议你使用类切换，例如，如果你有 jquery，你可以轻松地 onfocus="$(this).addClass('focusedinput');" onblur="$(this).removeClass('focusedinput');"它比内联样式更有效。
我想我可以试试。我可以用 PHP 做吗？

【解决方案4】：

嗯，看来你还不太明白。 jQuery 是用于更简单的 javascript 编程的 javascript 库。

将此添加到您的<head></head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

而且你可以使用

onfocus="$(this).addClass('focusedinput');" onblur="$(this).removeClass('focusedinput');"

正如我在评论中提到的。这应该切换类focusedinput，谁应该持有元素的背景或颜色等属性。

【讨论】：

【解决方案5】：

我刚刚从 URL 中删除了引号，它可以工作。

没用：

 this.style.background='white url('http://chusmix.com/Imagenes/contawidget.png') no-repeat 50% 50%'

工作：

 this.style.background='white url(http://chusmix.com/Imagenes/contawidget.png) no-repeat 50% 50%'

【讨论】：

你最好改成className，这样可以省去你整个引用的痛苦。