将 'this' 传递给 Javascript 函数的问题

Question

有点被这个问题搞糊涂了。我写了这个函数来替换输入元素中的标点符号：

function punctuationReplace(element){
 var elementToChange = document.getElementById(element);
 elementToChange.value = elementToChange.value.replace(/\"/g, '');
 elementToChange.value = elementToChange.value.replace(/\'/g, '');
 elementToChange.value = elementToChange.value.replace(/&/g, 'and');
 elementToChange.value = elementToChange.value.replace(/</g, '');
 elementToChange.value = elementToChange.value.replace(/>/g, '');
}

<input type="text" id="IPR_FNM1" name="IPR_FNM1" value="" maxlength="30" size="31" placeholder="Forename 1" onblur="punctuationReplace(this)"/>

当我手动运行浏览器控制台中的函数并将相关 ID 作为参数时，它起作用了。当我在函数内部添加行 alert(element.id); 时，我收到包含正确元素 ID 的警报。所以我很困惑为什么上面的 punctuationReplace 函数在我使用 onblur="punctuationReplace(this)".

调用它时不起作用

我确定有一个简单的解决方案，但不知道它是什么。

Answer 1

停止使用内联事件处理程序，问题自行解决

document.getElementById('IPR_FNM1').addEventListener('blur', punctuationReplace, false);

function punctuationReplace(){
    this.value = this.value.replace(/("|'|<|>)/g, '').replace(/&/g, 'and')
}

Answer 2

this 是对 DOM 元素的引用。它不是包含 ID 的字符串。

您试图将它用作 getElementById 的参数，但是当它被字符串化（到 "[Object object]"）时，文档中没有匹配的 ID，因此您得到 null.

您已经拥有该元素。您无需搜索 DOM。

删除行 var elementToChange = document.getElementById(element); 并将其他引用更改为 element。

Answer 3

如果您以这种方式传入 this，您已经有了对该元素的引用，因此无需调用 getElementById。

function punctuationReplace(element){
    var elementToChange = element; //document.getElementById(element);
    elementToChange.value = elementToChange.value.replace(/\"/g, '');
    elementToChange.value = elementToChange.value.replace(/\'/g, '');
    elementToChange.value = elementToChange.value.replace(/&/g, 'and');
    elementToChange.value = elementToChange.value.replace(/</g, '');
    elementToChange.value = elementToChange.value.replace(/>/g, '');
}

Answer 4

this 已经有对您想要的元素的引用。您无需使用 getElementById 再次获取它。只需将其直接放入您的变量即可：

  var elementToChange = element;

Answer 5

您无需创建 var，只需继续使用 element。像这样： http://jsfiddle.net/0xuf64zb/1

function punctuationReplace(element){
    element.value = element.value.replace(/\"/g, '');
    element.value = element.value.replace(/\'/g, '');
    element.value = element.value.replace(/&/g, 'and');
    element.value = element.value.replace(/</g, '');
    element.value = element.value.replace(/>/g, '');
}

并且确实停止使用内联调用！

将 'this' 传递给 Javascript 函数的问题

Issue passing 'this' into Javascript function

javascript

this