Question

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

这是字段：

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

任何人都知道我做错了什么？感谢

Answer 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;
}

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

Answer 2

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

Answer 3

我很确定问题来自于this.value =''this.style.background ='。那里你需要一个分号。你真的想在用户点击它时将值设置为空白吗？

Answer 4

嗯，似乎你并没有完全理解。 jQuery是用于更简单的javascript编程的javascript lib。

将其添加到您的<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');"

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

Answer 5

我刚刚从网址中删除了引号，它可以正常工作。

不起作用：

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

Wodked：

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

表单字段：如何更改模糊背景？

5 个答案: