Question

我收到此错误：

未捕获的TypeError：required不是函数在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与HTML required属性冲突。为函数使用不同的名称可以正常工作。

＆＃13;

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

＆＃13;

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

＆＃13;

为避免将来出现此类问题（ and for a whole bunch of other reasons ），您不应使用内联HTML事件属性（onclick，onsubmit等。）首先。这就是20多年前事件处理程序的注册方式。今天，我们有现代标准和最佳实践。请改用.addEventListener()，然后您可以使用您喜欢的任何有效标识符调用该函数。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我认为HTML5中存在预定义的必需功能。我将函数的名称更改为req并且它正常工作。感谢所有回复的人

onblur函数无法在javascript

3 个答案: