有没有一种方法可以使用JavaScript创建元素,即当用户在其中写入(输入)时可以在控制台中显示文本吗?例如,将是这样的:
<textarea oninput="print(this);"></textarea>
<script>
function print(e) {
console.log(e.value);
}
</script>
我的功能稍微复杂一点,但是您知道了。我想要的是使用JavaScript创建<textarea>
元素,然后在其上设置input
事件,并将其传递给this
对象。
答案 0 :(得分:2)
这应该很清楚地解释该过程:
// Selects an existing element in the DOM
const theParentElement = document.getElementById("container");
// Makes our new element
const newTextArea = document.createElement("textarea");
// Adds the new element to the DOM
theParentElement.appendChild(newTextArea);
// Calls printText when the textarea receives key input (or actually, ANY input)
newTextArea.addEventListener("input", printText);
// The listener gets a reference to the triggering event. Let's call it `event`
function printText(event){
// The event's `target` property holds the element where the event happened
const localReferenceToTheTextArea = event.target;
// The text of a textarea element lives in its `value` property
const text = localReferenceToTheTextArea.value;
console.log(text);
}
<div id="container"></div>
答案 1 :(得分:1)
您可以这样做:
var textarea = document.createElement("textarea");
然后将事件侦听器绑定到新创建的元素:
textarea.addEventListener("input", function () { /*Do the thing*/ });
这样,事件侦听器将始终绑定到您创建的元素。
我希望这会对您有所帮助。 :)
答案 2 :(得分:0)
如果我对您的理解正确,则可以执行以下操作
var myTextarea = document.createElement("textarea")
myTextarea.setAttribute("oninput", "print(this);")
// we get something like this => <textarea oninput="print(this);"></textarea>
document.body.appendChild( myTextarea )
console.log(myTextarea)
或者您可以使用javascript EventListener
var myTextarea = document.createElement("textarea")
/* add the textarea to the body */
document.body.appendChild( myTextarea )
/* when we can use EventListener */
myTextarea.addEventListener("input", ()=>{
/* do something with value*/
console.log( myTextarea.vlaue )
})
答案 3 :(得分:0)
<textarea id="area"></textarea>
<script>
const textArea = document.getElementById("area"); // Defines `textArea`
textArea.addEventListener("input", e => {
console.log(e.target.value);
});
</script>
答案 4 :(得分:-1)
首先,将一个变量设置为要创建的元素。就您而言,<textarea>
var textareaElement = document.createElement("textarea");
然后,像这样设置oninput
:
textareaElement.setAttribute("oninput", "print(this)");
最后,将元素添加到body
:
document.body.appendChild(textareaElement);
放在一起:
function print(e) {
console.log(e.value);
}
var textareaElement = document.createElement("textarea");
textareaElement.setAttribute("oninput", "print(this)");
document.body.appendChild(textareaElement);