我正在寻找使用纯JavaScript的方法,不使用插件、框架,并且我不能编辑HTML。
类似于以下示例:
当我更改输入中的值
MyObject
时,运行此函数。MyObject
时,运行此函数。这就是事件的用途。
HTMLInputElementObject.addEventListener('input', function (evt) {
something(this.value);
});
<input type="text" name="Thing" value="" />
脚本:
/* Event listener */
document.getElementsByName("Thing")[0].addEventListener('change', doThing);
/* Function */
function doThing(){
alert('Horray! Someone wrote "' + this.value + '"!');
}
$("#myElementId").val("new val"); $("#myElementId").trigger("change");
实际上,所勾选的答案是完全正确的,但是答案可以采用ES6
的形式:
HTMLInputElementObject.oninput = () => {
console.log('run'); // Do something
}
或者可以像下面这样写:
HTMLInputElementObject.addEventListener('input', (evt) => {
console.log('run'); // Do something
});
默认用法
el.addEventListener('input', function () {
fn();
});
但是,如果你想在通过JavaScript手动更改输入值时触发事件,你应该使用自定义事件(任何名称,如'myEvent'、'ev'等)。如果你需要监听表单的“change”或“input”事件,并通过JavaScript更改输入值,你可以将自定义事件命名为“change”或“input”,它也会起作用。
var event = new Event('input');
el.addEventListener('input', function () {
fn();
});
form.addEventListener('input', function () {
anotherFn();
});
el.value = 'something';
el.dispatchEvent(event);
element.dispatchEvent(new Event('change'))
是关键。手动 JS 更改没有触发事件,这一点不合常理,但突然之间却能成功了。让我感到有些愚蠢。 - s3c2021年的另一种方法可能是使用document.querySelector()
:
const myInput = document.querySelector('input[name="exampleInput"]');
myInput.addEventListener("change", (e) => {
// here we do something
});
HTML表单输入包含许多事件。请参考HTMLElement,在侧边栏中转到事件菜单并展开。您将看到许多有用的事件,如beforeinput
、change
、copy
、cut
、input
、paste
和拖放事件。
iput
& change
当您键入表单输入值时,beforeinput
和input
事件按顺序触发。
当表单输入值已更改且您失去了该输入的焦点时,change
事件将被触发。
当您剪切(键盘快捷键为CTRL+X)输入值时,会触发cut
、beforeinput
和input
事件。
当您复制(键盘快捷键为CTRL+C)时,只会触发copy
事件。
当您从剪贴板粘贴值(键盘快捷键为Ctrl+V)时,会触发paste
、beforeinput
和input
事件。
要通过JavaScript更改输入值并使重要事件起作用,您需要按顺序至少分派两个事件。一个是input
,另一个是change
。这样,您就可以将代码集中到侦听input
或change
事件上。这样做更容易。
以下是所有示例代码。
(() => {
let inputText = document.getElementById('text');
let submitBtn = document.getElementById('submit');
let triggerJSBtn = document.getElementById('button');
submitBtn.addEventListener('click', (event) => {
event.preventDefault(); // just prevent form submitted.
});
triggerJSBtn.addEventListener('click', (event) => {
const thisTarget = event.target;
event.preventDefault();
inputText.value = thisTarget.innerText;
inputText.dispatchEvent(new Event('input'));
inputText.dispatchEvent(new Event('change'));
});
inputText.addEventListener('beforeinput', (event) => {
const thisTarget = event.target;
console.log('beforeinput event. (%s)', thisTarget.value);
});
inputText.addEventListener('input', (event) => {
const thisTarget = event.target;
console.log('input event. (%s)', thisTarget.value);
});
inputText.addEventListener('change', (event) => {
const thisTarget = event.target;
console.log('change event. (%s)', thisTarget.value);
});
inputText.addEventListener('cut', (event) => {
const thisTarget = event.target;
console.log('cut event. (%s)', thisTarget.value);
});
inputText.addEventListener('copy', (event) => {
const thisTarget = event.target;
console.log('copy event. (%s)', thisTarget.value);
});
inputText.addEventListener('paste', (event) => {
const thisTarget = event.target;
console.log('paste event. (%s)', thisTarget.value);
});
})();
/* For beautification only */
code {
color: rgb(200, 140, 50);
}
small {
color: rgb(150, 150, 150);
}
<form id="form">
<p>
Text: <input id="text" type="text" name="text">
</p>
<p>
Text 2: <input id="text2" type="text" name="text2"><br>
<small>(For lost focus after modified first input text so the <code>change</code> event will be triggered.)</small>
</p>
<p>
<button id="submit" type="submit">
Submit
</button>
<button id="button" type="button">
Trigger JS to set input value.
</button>
</p>
<p>Press F12 to view results in your browser console.</p>
</form>
var element = document.getElementById('input');
element.addEventListener('input', function() {
// Do something
});
Keydown、keyup和input是在输入内容更改时立即触发的事件。
我会使用keydown或input事件来获取输入框中更改后的值。
const myObject = document.getElementById('Your_element_id');
myObject.addEventListener('keydown', function (evt) {
// Your code goes here
console.log(myObject.value);
});
在我看来,这只是将“onchange”误认为是“oninput”,而这两者是不同的。
const textarea = document.querySelector(`#string`)
textarea.addEventListener("keydown", (e) =>{
console.log('test')
})
typeof this.value
是一个字符串。如果需要一个数字,请使用 parseInt 或 parseFloat 进行转换。 - Akseli Palénwindow.addEventListener('input', function (evt) { if() {} })
。 - Leffathis.valueAsNumber
来处理数字。 - Falling10fruit