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

【问题标题】：Code Event Listener for form text fields when value changes?值更改时表单文本字段的代码事件侦听器？
【发布时间】：2011-07-29 11:29:29
【问题描述】：

我有一个包含七个文本字段的 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 中工作。

【问题讨论】：

标签： javascript forms addeventlistener event-listener

【解决方案1】：

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

代码看起来很冗长，确实需要清理一下：

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

我认为你可以用一个调用 format() 的单个 onchange 处理程序替换除上述两个处理程序之外的所有处理程序。

例如，如果您将样式放入 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>

您可能希望将处理程序动态添加为侦听器，但如果您正在做这一切，内联就可以了。

【讨论】：

更改事件的问题是文本字段必须失去焦点。我不希望这样，我正在寻找一种解决方案来侦听任何类型的用户输入并立即更新。
您必须使用更改事件，因为这是您知道用户（可能）完成更新元素的唯一时间。为了确定你需要等待提交。你怎么会早点知道？即使他们将某些内容拖到输入中，他们可能仍想在继续之前对其进行修改。并且在用户键入时进行格式化是一个可怕的不可用功能，它会惹恼用户。
其实我做的这个项目不是为了一个网站，而是一个扩展。此表单的全部目的是格式化文本。我希望它实时更新，消除提交或执行按钮的麻烦，因为用户只想要最终结果。此外，它不会提交表单，而是在表单下方的 contenteditable div 中打印出格式化文本，因此用户可以随时返回并编辑表单字段。
这是很久以前的事了，从那以后我对技术的了解变得更加透彻，不再那么“骇人听闻”了，我现在完全同意 RobG 的优点。并且使用onchange 很有意义。我不太记得我在尝试做什么，但是很好的建议使我成为了正确的答案。

【解决方案2】：

使用像 jquery 这样的库很容易做到这一点

示例：

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

【讨论】：

再次，它依赖于文本字段必须失去焦点的事实。我不希望这样，我正在寻找一种解决方案来侦听任何类型的用户输入并立即更新。

【解决方案3】：

这个问题之前已经讨论过了（我现在找不到之前的问题）。本机 DOM 不支持您想要的（如您所知，它仅在焦点离开时触发）。剩下两个主要选择：

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

我通常不喜欢计时器解决方案，因为它们似乎 CPU 效率低下，但如果与键入协调，则可以做一个相当高效的计时器，该计时器对用户友好，因此格式会在 x 秒后触发输入暂停。

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

【讨论】：