Question

我有脚本

<input type="text" name="name" value="Joe Bloggs" onfocus="this.value=''"/>

就像我正在使用onfocus =“this.value ...”我可以更改字段的背景（+更改其他内容吗？）

非常感谢。

此外，是否有人更好地了解如何执行上述脚本，但是当取消选择时，文本会重新出现。？

再次感谢。

Answer 1

将样式设置为CSS和逻辑到JS是最佳实践。

您可以使用:focus伪类在css中执行此操作。（http://www.quirksmode.org/css/focus.html）不幸的是，它在IE7或更低版本中不起作用。对于这些浏览器，您可以使用javascript向<input>添加一个类来执行相同的操作。

CSS

input:focus, input.focus {background:#ff0}

如果您使用的是jQuery，请按照以下方式进行操作。

$('input').focus(function(){
     $(this).addClass('focus');
});
$('input').blur(function(){
     $(this).removeClass('focus');
});

Answer 2

的内容

onfocus="this.value=''; this.style.backgroundColor='#f00'" onblur="this.style.backgroundColor='white'"

只会简单地得到你想做的事情，虽然它也可能与其他地方定义的演示文稿交互不良，因此可能是相当粗略的被认为是最佳实践。

或者，您可以按照建议在onfocus / onblur元素中添加/删除特定类。在这一点上，我也会提出jQuery建议：虽然它几乎没有必要，但你会发现它使得Javascript的生活更加愉快。

如果你使用jQuery，比如

$('input').focus(function() { $(this).addClass('focus') });
$('input').blur(function() { $(this).removeClass('focus') });

允许您在CSS中清晰地定义焦点输入的外观。请参阅jQuery文档，了解使其工作所需的周围环境。

Answer 3

... id =“name”onfocus =“javascript：yourFunction（）;”...

然后，你的js看起来像这样：

var inputFld = document.getElementById('name');<br/> 
var oldval = inputFld.value;<br/>
var tempval = "";<br/>

function yourFunction（）{

inputFld.value = tempval;<br/>
inputFld.className = "test" //(building from the first answer)<br/>
//do other stuff...<br/>

}

然后，你还可以添加一个onblur =“javascript：anotherFunction（）;”其中anotherFunction（）将inputFld.value重置为原始值。

请注意，最佳做法建议您应避免使用这些全局变量，并为onblur和onfocus事件附加事件侦听器，而不是内联它们。但是，至少，最初，您可以看到它编写的代码是否适合您...

Answer 4

在您的活动中，附加班级名称......

el.className+= 'test'

然后在你的CSS中设置该类的背景。