如何在 <input type="text"> 字段上使用 onFocus、onChange 和 onClick 事件答案

【问题标题】：How do I use onFocus, onChange, and onClick events on a <input type="text"> field如何在 <input type="text"> 字段上使用 onFocus、onChange 和 onClick 事件
【发布时间】：2012-01-09 01:48:49
【问题描述】：

我有一个家庭作业，我应该在三个表单域中的每一个上使用onFocus、onChange 和onClick 事件。每个事件都应该将字段名称传递给函数。该功能应该提醒事件已经发生，并让用户知道发生了多少警报。上周我一直在试图找到答案，而我能够始终如一地找到的是 onFocus 事件不能与文本字段一起使用（尽管这不会改变我的分配）。我目前的代码如下：

<SCRIPT LANGUAGE="JavaScript">
<!--

var numEvents = 0;
var field1 = ""; 
var field2 = ""; 
var field3 = "";

function clickedField(fieldId) {
    if (document.form1.field1.value = field1){ 
    events=runningTotal(1);
    alert("You have clicked Field 1. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field2.value = field2){ 
    events=runningTotal(1);
    alert("You have clicked Field 2. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field3.value = field3){ 
    events=runningTotal(1);
    alert("You have clicked Field 3. Alert Count = " + runningTotal(i) + ".");
    }
}

function changedField(fieldId) {
    if (document.form1.field1.value!= field1){ 
    events=runningTotal(1);
    alert("You have changed Field 1. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field2.value!= field2){ 
    events=runningTotal(1);
    alert("You have changed Field 2. Alert Count = " + runningTotal(i) + ".");
    }
    if (document.form1.field3.value!= field3){ 
    events=runningTotal(1);
    alert("You have changed Field 3. Alert Count = " + runningTotal(i) + ".");
    }
}
/* 
function focusedField(fieldId) {
    if (document.form1.field1.value = field1){ 
    events=runningTotal(1);
    alert("You have focused on Field 1. Alert Count = " + runningTotal(i) + ".");
    }
    else if (document.form1.field2.value = field2){ 
    events=runningTotal(1);
    alert("You have focused on Field 2. Alert Count = " + runningTotal(i) + ".");
    }
    else if (document.form1.field3.value = field3){ 
    events=runningTotal(1);
    alert("You have focused on Field 3. Alert Count = " + runningTotal(i) + ".");
    } 
}*/

function runningTotal(i){
    numEvents += i;
    return numEvents;
}

// -->
</SCRIPT>

我知道有几个错误，但不是在实际代码中，因为它没有做我需要它做的事情。在我添加 . Alert Count = " + runningTotal(i) + "." 和警报的参数之前，当我更改字段时它告诉我。

【问题讨论】：

发布所有错误也会有所帮助。

标签： javascript onclick dom-events onchange onfocus

【解决方案1】：

我不确定您是否需要以下代码来触发这些 javascript 函数

<input name="field1" id="field1" onfocus="focusedField(this.id)" onclick="clickedField(this.id)" onchange="changedField(this.id)"/>
<input name="field2" id="field2" onfocus="focusedField(this.id)" onclick="clickedField(this.id)" onchange="changedField(this.id)"/>
<input name="field3" id="field3" onfocus="focusedField(this.id)" onclick="clickedField(this.id)" onchange="changedField(this.id)"/>

【讨论】：

【解决方案2】：

if (document.form1.field1.value = field1){

需要

if (document.form1.field1.value == field1){

【讨论】：

【解决方案3】：

首先，我在您的代码中没有看到您将这些函数分配给必要的事件。

其次，我看不到任何将field1、field2 和field3 变量分配给值的地方。除此之外，您正在检查该字段的值，无论如何我不确定您为什么要这样做。

第三，您必须使用== 来测试等效性，而不是=。

【讨论】：

【解决方案4】：

第一件事：你的 if 语句需要比较运算符 (==) 而不是赋值运算符 (=)，然后

这样的事情会起作用：

window.onload = function(){
    document.form1.field1.onclick = function(){
        changedField(this);
    }
}

它会向函数发送对 itelf 的引用，您可以在其中访问其值或 id 等。需要在window.onload之后进行处理，保证事件分配前表单项存在。

【讨论】：