onChange 事件不会触发答案

【问题标题】：onChange event doesn't triggeronChange 事件不会触发
【发布时间】：2012-06-12 17:55:08
【问题描述】：

我使用 Internet Explorer 8 和 Sharepoint 2007。

简报：我有一个包含列表中各个字段的 NewForm。我需要使用 javascript 从其中一个字段中获取用户引入的值（在文本框中），然后使用 onChange 将其粘贴到同一页面中的其他字段（其他文本框）上。

问题：我是一个 JavaScript 新手，我不能设置事件 'onChange' 来触发我的函数，或者至少触发一个 'alert("Test") ... 或者只是我在做它错了，不知道为什么（更有可能）......

假设我要使用的字段为 FieldName="IDTeam"、type="text" 和 id="id_TeamField"。

//My JS below "PlaceHolderMain"

_spBodyOnLoadFunctionNames.push("setTxtBoxesValues");

function setTxtBoxesValues()
{    
   //snipped

   getField('text','IDTeam').onChange = function(){alert('Test')}; 
   //"getField('text', 'IDTeam).onChange = function(){myFunction()};" 
   //If I want to call myFunction() when onChange event is triggered    
    }

另外，代替 getField，尝试了这个：

document.getElementById('id_TeamField').onChange = function(){alert('Test')};

如果我想在 onChange 事件触发时调用 myFunction()

知道我做错了什么吗？

【问题讨论】：

标签： javascript sharepoint-2007

【解决方案1】：

onchange 是一个事件，因此您可以像这样将它放在标签中：

<input type="text" id="IDTeam" onchange="(call function here)" />

或者你将 addEventListener 应用到那个 DOM 对象：

document.getElementById("IDTeam").addEventListener("change", function() {//call function here});

在 IE6 中你可能需要：（不确定它是否有效，因为现在很少有人使用 ie6）

document.getElementById("IDTeam").attachEvent("onchange", function() {//call function here} )

【讨论】：

之前尝试过“将其放入标签中”（最近再次尝试以防万一）。仍然没有工作。不知道它是否有帮助，但现在我看它......它说“在 IE 6.0 中，'onchange' 属性不被允许”。
@MayerM 如果您仍然坚持使用 ie6，您应该指出这一点。糟透了。请参阅上面的我的版本。
对不起，不知道...我在 IE 8 上运行它，但在 Designer 2007 中，它显示“辅助方案：IE 6.0”（我刚刚看到它：S）...仍然没什么：/谢谢，虽然:)
@MayerM 简单示例在这里：jsfiddle.net/mxRtB 一旦输入发生变化和模糊，就会弹出警报（点击外部）
您介意使用 addEventListener 或 attachEvent 编写一个示例吗？ ------------ 在 JsFiddle 中，在标签上书写效果很好，但我尝试使用 javascript（如您所示）但没有用。----------------不知道是我搞砸了还是只是我的浏览器（它说“对象不支持此属性或方法”）。

【解决方案2】：

这样做：

window.onload = function() { 
    document.getElementById('id_TeamField').addEventListener('change', function() {
        alert('test');
    });
};

或者使用 jQuery：

$('#id_TeamField').on('change', function() {
    alert('test');
});

【讨论】：

感谢您的快速响应 :) 不幸的是，它不起作用：/（仍然没有做任何事情）。
@MayerM - 是的，确实如此：jsfiddle.net/kE4CV onchange 事件在输入模糊之前不会触发
我确定您对其进行了测试并且工作正常......但对我不起作用（两种解决方案都没有）。也许我的设计师（某些配置）有问题？我向 NSF 提到我刚刚注意到，在页面编辑器选项中，它显示“辅助方案：IE 6.0”，即使我在 IE8 中运行该页面。
在那个页面试过这个 -> jsfiddle.net/kE4CV 没用。它显示“页面错误”。当我检查错误时，它显示 -> 错误详细信息 Mozilla/4.0（兼容；MSIE 8.0；Windows NT 5.1；Trident/4.0；.NET CLR 2.0.50727；.NET CLR 3.0.4506.2152；.NET CLR 3.5.30729）日期：星期一，2012 年 6 月 11 日 15:01:44 UTC 消息：对象不支持此属性或方法行：20 字符：1 代码：0 URI：link PS：第 20 行是此行'document.getElementById('id_TeamField').addEventListener('change', function() { alert('test'); });跨度>

【解决方案3】：

你可以这样做

添加事件监听器

document.getElementById('id_TeamField').addEventListener('change', function(){alert('test');});

或

为标签添加 onChange

<select onChange='function() { alert('test');}' name='IDTeam' id='id_TeamField' >
   <option>option1</option>
   <option>option2</option>
   <option>option3</option>
</select>

【讨论】：

【解决方案4】：

这与其他人所说的有点多余，但分享一下，因为它更直接：

const select = document.getElementById('select')
const newText = document.getElementById('newText')

select.addEventListener("change", e => {
  console.log(e.target.value)
  newText.value = e.target.value
})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <select id="select">
    <option value="url1">tool_ver1</option>
    <option value="url2">tool_ver2</option>
    <option value="url2" selected >tool_ver3</option>
  </select>
  <button type="submit">Retrieve New Release App Options</button>
<div class="textInput spacer">
  <h2>New Release App Options</h2>
  <textarea id="newText"></textarea>
</div>
  
  
</body>
</html>

【讨论】：