当值更改时，用于表单文本字段的代码事件侦听器

Code Event Listener for form text fields when value changes?

本文关键字：字段 文本 代码 侦听器 事件 表单 用于      更新时间：2023-09-26

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

您最好只使用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>

您可能希望动态地将处理程序添加为侦听器，但如果这是您所做的全部，则内联也可以。

使用jquery这样的库可以很容易地做到这一点

的例子:

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

这个问题之前已经讨论过了(我现在找不到之前的问题)。本机DOM不支持您想要的东西(如您所知，它只在焦点离开时触发)。这就留下了两个主要的选择:

  1. 尝试拦截与用户可能改变内容的方式(键，鼠标右键粘贴，拖放等)相关的所有可能事件，然后在每个可能的事件之后自己检查内容，看看是否有任何变化。
  2. 使用一个适度缓慢的计时器轮询每个字段的值，看看它们是否已经改变。

我通常不是计时器解决方案的粉丝，因为它们似乎cpu效率低下，但如果它与键入协调，那么格式将在键入暂停后触发x秒，则可能有一个合理有效的用户友好的计时器。

编辑:我发现了一个以前的帖子。据此，有三种可能的方式"输入"事件，挂钩所有常规事件(如keyup)或计时器。

相关文章：