Onblur 函数在 JavaScript 中不起作用

Question

我收到此错误：

未捕获的类型错误：必需不是函数 at HTMLInputElement.onblur (index.html：20)

每当我尝试运行此 HTML 代码时：

<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus onblur= "return required(document.getElementById('nbreAdultes'));" />

我的脚本：

function required(inputtx) {
if (inputtx.value == "") { 
myError.innerHTML = "Input is required";    
return false; 
}   
return true; 
}

Answer 1

将函数名称更改为其他名称，例如require()将起作用：

function require(inputtx) {
console.log('Success');
}

<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus onblur="return require(document.getElementById('nbreAdultes'));" />

当您使用required作为标识符时，它被解释为元素的required属性，而不是函数的名称：

<input type="text" onblur="console.log(required)" /> <!-- logs "false" -->
<input type="text" onblur="console.log(required)" required /> <!-- logs "true" -->

原因是定义为属性的事件处理程序在与普通函数不同的范围内执行。要解析普通函数中定义的变量x，运行时将首先查找名为x的局部属性，如果找不到，它将尝试查找同名的全局属性。

对于 HTML 中的事件处理程序内容属性，作用域链是不同的。尝试在本地解析标识符(在事件处理程序本身中)后，JavaScript 将尝试将其解析为定义事件处理程序的元素的属性。如果无法在那里解析，它将继续向上层次结构，直到到达全局Window对象。

因此，总而言之，您目睹的行为之所以发生，是因为您的required()函数在作用域链中被定义为比元素的required属性更高的位置。

Answer 2

使用内联 HTML 事件属性(onblur、onclick等)时，作为事件发生时要运行的代码提供的代码在触发事件的元素的上下文中运行。在这种情况下，required与 HTMLrequired属性冲突。 为函数使用不同的名称可以正常工作。

function req(inputtx) {
if (inputtx.value == "") { 
myError.innerHTML = "Input is required";    
return false; 
}   
return true; 
}

<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus onblur= "return req(document.getElementById('nbreAdultes'));" >
<span id="myError"></span>

为了避免将来出现此类问题(以及一大堆其他原因)，您首先不应该使用内联 HTML 事件属性(onclick、onsubmit等)。这就是事件处理程序在 20+ 年前注册的方式。今天，我们拥有现代标准和最佳实践。请改用.addEventListener()，然后可以调用该函数所需的任何有效标识符。

// First, get a reference to the element that will fire the event
var input = document.getElementById("nbreAdultes");
// Then, register an event callback function
input.addEventListener("blur", require);
// No need to pass a reference to the element into the function.
// It will automatically be bound to "this".
// Also, no need for return true or return false.
function require() {
if (this.value == "") { 
myError.innerHTML = "Input is required";    
}   
}

<input type="text" name="nbreAdultes" id="nbreAdultes" autofocus>
<span id="myError"></span>

Answer 3

我认为HTML5中有一个预先定义的必需函数。 我将函数的名称更改为 req 并且它可以工作。感谢所有回复的人