在HTML中,<textarea>
标签用于创建多行文本输入控件。事件冒泡是指在事件传播过程中,事件会从最深层的元素开始,向上传播至最外层元素。文本域、清空、重置通常是与表单提交和处理相关的概念。
<textarea>
标签:
<textarea rows="4" cols="50">
这里可以输入文本...
</textarea>
- 事件冒泡:
<button onclick="myFunction()">点击我</button>
<script>
function myFunction() {
alert("按钮的点击事件被触发");
}
</script>
在这个例子中,当按钮被点击时,会触发myFunction()
函数,然后弹出一个警告框。
- 文本域(
<textarea>
)回车换行:
在<textarea>
标签中输入文本时,按下回车键(Enter)会产生换行效果。
<textarea rows="4" cols="50">
第一行文本
第二行文本
</textarea>
- 清空:
可以通过JavaScript设置<textarea>
的value
属性为空字符串来清空文本域。
<textarea id="myTextarea"></textarea>
<button onclick="clearTextArea()">清空</button>
<script>
function clearTextArea() {
document.getElementById("myTextarea").value = "";
}
</script>
- 重置:
可以通过给<form>
元素添加reset()
方法来重置整个表单,包括文本域。
<form id="myForm">
<input type="text" value="已输入的文本">
<textarea id="myTextarea">已输入的文本</textarea>
<input type="reset">
</form>
- 阻止事件冒泡:
在JavaScript中,可以使用event.stopPropagation()
来阻止事件进一步冒泡。
<div onclick="alert('div clicked')">
Click me
<button onclick="event.stopPropagation(); alert('button clicked')">Click me</button>
</div>
在这个例子中,当点击按钮时,会弹出一个警告框显示“button clicked”,但是点击事件不会冒泡到div元素,因此不会弹出另一个警告框。