怎么实时判断textarea内容？

1.想实现textarea默认是空,输入文字时显示按钮。而把文字删除后按钮消失，
请问这个怎么实现

javascript

阅读 7.9k

3 个回答

得票最新

daisy0913

902

发布于
2016-09-21

用 JQuery 使用 keyup 时间做监听, 判断 textarea value 长度

NoGameNoLife

70137

发布于
2016-09-21

更新于
2016-09-21

监听textarea的onchange、onpropertychange、oninput、onkeyup事件，一旦触发事件就检查textarea里面的内容。内容为空，按钮就隐藏。不为空按钮就出现

这4个事件的区别：
onchenge触发条件：当前对象的属性改变（由键盘或鼠标触发）且对象失去焦点
onpropertychange是当前对象属性改变就会触发但是是IE专属
oninput和onpropertychange类似，但是支持firefox和opera等这种非IE浏览器的
onkeyup捕获用户键盘输入事件（不支持复制粘贴）

可以结合oninput和onpropertychange一起使用对textarea的内容进行判断

GreatAuk

41753140

发布于
2016-09-21

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
<script>
function keypress() //textarea输入长度处理
{
var text1=document.getElementById("myarea").value;
var len;//记录剩余字符串的长度
if(text1.length>=300)//textarea控件不能用maxlength属性，就通过这样显示输入字符数了
{
document.getElementById("myarea").value=text1.substr(0,300);
len=0;
}
else
{
len=300-text1.length;
}
var show="你还可以输入"+len+"个字";
document.getElementById("pinglun").innerText=show;
}

</script>
</head>
<body>
<center>
<div style="text-align:left;">
<h3>评论内容:</h3><br>
<textarea id="myarea" style="height:100px;width:200px;overflow-x:hidden;overflow-y:hidden" onKeyUp="keypress()" onblur="keypress()"></textarea>
<font color="gray"><label id="pinglun">你还可以输入300个字</label></font>
<div>
</center>
</body>
</html>

撰写回答

你尚未登录，登录后可以

和开发者交流问题的细节
关注并接收问题和回答的更新提醒
参与内容的编辑和改进，让解决方法与时俱进

推荐问题

相似问题

找不到问题？创建新问题

怎么实时判断textarea内容？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

Next.js做纯前端是否可行？

如何实现一个深拷贝函数？

怎么获取动态弹出对话框的模拟单击？

git提交记录问题？

为什么在 JavaScript 中直接调用和用逻辑与调用方法结果不同？

如何在Next.js中使用Cloudflare的Server Actions？