Question

我有一个包含七个文本字段的html表单。我需要一个Javascript事件监听器来监听默认值中的值的任何变化。无论是粘贴，删除还是键入文本，事件侦听器都需要触发一个名为format（）的函数。我该怎么做？

以下是html表单：

<form class="right_aligned" name="form" method="get" action="" id="form" >

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="publication" value="Publication..." id="publication" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"
ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}"     onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="title" value="Article Title..." id="title" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<div style="float: left"><input ondblclick="this.value=''" type="text" name="author" value="Author..." id="author" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="credentials" value="Credentials..." id="credentials" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<div style="float: left"><input ondblclick="this.value=''" type="text" name="date" value="Date..." id="date" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<div style="float: left;"><input ondblclick="this.value=''" type="textarea" name="evidence" value="Evidence..." id="evidence" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<div style="float: left;"><input ondblclick="this.value=''" type="text" name="tagline" value="Tagline..." id="tagline" style="border:1px solid;border-color:#B0B0B0;width:225px;padding:4px;margin-left:10px;margin-bottom:10px;margin-top:10px;color: #000;"  
onmouseup="format()" ondrop="format()" ondragover="{this.value=''; this.style.color='#000';}" onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}" onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}"></div>

<input class="button" type="reset" value="Clear Form" onClick="clearForm()" style="margin:5px 5px 5px 10px;float:left">

</form>

顺便说一下，事件监听器代码只能在Firefox中运行。

Answer 1

您最好只使用更改事件。当输入失去焦点时，将调度它，这是适当的时间。

代码似乎非常冗长，它确实需要清理：

<div style="float: left;">

应使用CSS添加样式以减少页面中的标记量。它还使得控件样式更容易，因为它们都在一个地方，并且可以从样式表中进行控制。

<input ondblclick="this.value=''"

用户是否期望这样？双击文本输入通常会选择光标下的单词，用户删除内容时可能会感到惊讶。

type="text" name="tagline" value="Tagline..." id="tagline"
style="..."

同样，所有样式内容都可以在样式表中，因此您可以使用类或其他选择器将一个规则应用于所有类似的输入。

onmouseup="format()" ondrop="format()"

你认为所有这些事件可能会互相影响吗？

ondragover="{this.value=''; this.style.color='#000';}"

这应该发生吗？如果用户正在前往另一个输入的路上怎么办 - 拖过这个并且 - 哎呀！ - 内容已经消失了！

onfocus="if (this.value==this.defaultValue) {this.value=''; this.style.color='#000';}"
onblur="if(this.value=='') {this.value=this.defaultValue; this.style.color='#000';}">

我认为您可以使用一个 onchange 处理程序替换除上述两个处理程序之外的所有处理程序，该处理程序调用 format（）。

例如，如果您将样式放入CSS规则中，如：

#form input {
  border:1px solid;
  border-color:#B0B0B0;
  width:225px;
  padding:4px;
  margin-left:10px;
  margin-bottom:10px;
  margin-top:10px;
  color: #000;
}

#form div {
  float: left;
}

并添加一个函数来处理提示，如：

function updateHint(e) {
  var el = e.target || e.srcElement;
  if (e.type == 'focus') {
    if (el.value == el.defaultValue) {
      el.value='';
      el.style.color='#000';
    }
  } else if (e.type == 'blur') {
    if(el.value=='') {
      el.value = el.defaultValue;
      el.style.color='#000';
    }
  }
}

然后您的输入可以是：

<div>
  <input onchange="format(this);" type="text"
   name="publication" value="Publication..."
   onchange="format(this)"
   onfocus="updateHint(event);" 
   onblur="updateHint(event);">
</div>

您可能希望将处理程序动态地添加为侦听器，但如果您正在执行此操作，则内联很好。

Answer 2

使用像jquery

这样的库非常容易

示例：

$("form input").change(function(){
    format();
});

Answer 3

此问题已在之前讨论过（我现在无法找到以前的问题）。本机DOM不支持你想要的东西（如你所知，它只在焦点离开时才会触发）。这留下了两个主要选择：

尝试拦截与用户可以更改内容的方式相关的所有可能事件（按键，鼠标右键单击粘贴，拖放等等），然后在每个可能的事件后自行检查内容如果有什么变化的话。
使用中等速度的计时器轮询每个字段中的值以查看它们是否已更改。

我通常不是计时器解决方案的粉丝，因为它们看起来效率不高，但是如果它与打字协调一致，那么它可能会做一个用户友好的合理有效的计时器，因此格式会在x秒后触发打字暂停。

编辑：我找到了其中一个previous posts。根据这个，三种可能的方式“输入”事件，挂钩所有常规事件（如keyup）或计时器。

值更改时表单文本字段的代码事件监听器？

3 个答案: