jquery 清空 textarea 的内容
时间: 2023-10-31 10:04:17 浏览: 95
你可以使用jQuery的`val()`方法来清空textarea的内容。例如,假设你有一个ID为`Textarea`的textarea元素,你可以这样做:
```javascript
$("#myTextarea").val("");
```
这将把textarea的内容设置为空字符串,达到清空textarea的目的。
相关问题
jquery禁止textarea输入
要使用jQuery禁用textarea输入,可以使用`.prop()`方法改变元素的状态,并结合`.val()`方法设置文本区域的值。下面是一个简单的示例说明如何通过jQuery禁用一个textarea:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Disable Textarea with jQuery</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.disable-input {
background-color: #ddd;
cursor: not-allowed;
}
</style>
</head>
<body>
<textarea id="myTextarea" rows="4" cols="50">这是未被禁用的 textarea 输入框。</textarea>
<button onclick="disableInput()">点击禁止输入</button>
<script>
function disableInput() {
$('#myTextarea').prop('disabled', true).addClass('disable-input');
// 设置 textarea 的值为空字符串,以使其失去焦点并阻止输入。
$('#myTextarea').val('');
}
// 添加一个事件监听器来恢复 textarea 的默认状态(如果需要)
$(document).ready(function () {
// 这里可以根据需要添加恢复功能的代码
});
</script>
</body>
</html>
```
### 示例解析
1. **HTML 结构**:
- 创建了一个包含`id='myTextarea'`属性的`<textarea>`元素。
- 按钮用于触发禁用操作。
2. **CSS**:
- `.disable-input` 类更改了 textarea 的背景颜色并更改为不可交互的样式。
3. **JavaScript**:
- `disableInput` 函数:
- 使用 `$('#myTextarea').prop('disabled', true)` 禁用 textarea。
- 使用 `$('#myTextarea').val('')` 将 textarea 的值清空,使得用户无法再次输入。
- 并应用 `.addClass('disable-input')` 来修改样式。
4. **事件处理**:
- 当页面加载完成时,可以添加额外的代码来控制是否允许再次编辑 textarea。
以上代码展示了如何通过jQuery简单地禁用一个文本区域输入。你可以根据需要调整CSS样式、函数的逻辑或是添加更多的事件处理机制。
优化<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布功能</title> <style> *{margin:0; padding:0 } #weibo{ width: 600px; padding:10px; border: 1px solid #000; margin:100px auto 0; } #weibo textarea{ width: 455px; height: 165px; resize:none; vertical-align: bottom; } #weibo button{ width: 40px; height: 24px; vertical-align: bottom; } #weibo ul{ margin:20px 20px 20px 90px; } #weibo li{ line-height: 24px; list-style-type:none; border-bottom:1px dashed #ccc; word-break:break-all; /*自动换行*/ } </style> </head> <body> <div id="weibo"> 微博内容: <textarea></textarea> <button>发布</button> <ul> <li></li> </ul> </div> <script src="../jquery-3.7.0.js"></script> <script> $('button').click(function(){ // 1.拿到输入的内容 var res=$('textarea').val(); if(res!=''){ // console.log(res); // 2.创建孤儿元素 var oLi=$('<li>'+res+'</li>'); //3.添加元素 $('ul').prepend(oLi); //4.清空文本域 $('textarea').val(''); }else{ alert('请输入内容'); } }); </script> </body> </html>
这段代码的优化可以从以下几个方面入手:
1. 将 script 标签放到 HTML 最后面,这样可以避免浏览器在渲染页面时被 JS 阻塞,提高页面加载速度。
2. 避免频繁操作 DOM,可以先将需要添加的元素存储在一个变量中,最后再添加到页面中。
3. 考虑使用事件委托,将事件绑定到父元素上,而不是每个子元素都绑定一次,这样可以提高性能。
4. 考虑使用模板引擎,可以更方便地生成 HTML 代码,避免代码重复和拼接字符串的问题。
阅读全文