Javascript中Textarea的常见问题（校验问题，初始化标签内容里有空格符）

最新推荐文章于 2024-09-24 16:15:36 发布

chy0csdn

最新推荐文章于 2024-09-24 16:15:36 发布

阅读量1.3k

点赞数

文章标签： js javascript html

本文链接：https://blog.youkuaiyun.com/chy0csdn/article/details/107519158

版权

本文解决了一个关于HTML中textarea标签的非空校验问题。通过改进JS校验逻辑，确保即使光标不在首行首位也能正确判断文本框是否为空。同时，纠正了textarea标签的书写错误，避免了因标签间空格和换行导致的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：新建的textarea标签没有赋值初始化内容，但是录入的时候光标不在首行首位，js校验非空，校验不生效。

问题代码如下（两处有问题的地方）：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 </HEAD>
<script language="javascript">
 function isNull(){
  var str=document.getElementById("textarea").value;
  if(str==null||str==""){
   alert("文本框内容为空");
  }else{
   alert("文本框内容为："+str);
  }
 }
</script>
 <BODY>
  <textarea id="textarea">
  </textarea>
 <input type="button" value="点击测试" οnclick="isNull()">
 </BODY>
</HTML>

问题1：js校验不严谨

 var str=document.getElementById("textarea").value;
  if(str==null || str==""){
    alert("文本框内容为空");
  }else{
    alert("文本框内容为："+str);
  }

解决1（这种方式解决了校验，但是文本框格式显示）:

var str=document.getElementById("textarea").value.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
if(str==null || str==""){
   alert("文本框内容为空");
  }else{
   alert("文本框内容为："+str);
  }

问题2：html标签<textarea>书写有问题

 <BODY>
  <textarea id="textarea">
  </textarea>
 <input type="button" value="点击测试" οnclick="isNull()">
 </BODY>

解决2：html标签<textarea></textarea>标签中间不要有空格和换行

<BODY>
  <textarea id="textarea"></textarea>
 <input type="button" value="点击测试" οnclick="isNull()">
 </BODY>

总：正确的代码如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
 </HEAD>
<script language="javascript">
 function isNull(){
  var str=document.getElementById("textarea").value.replace(/(^[\s\t\xa0\u3000]+)|([\u3000\xa0\s\t]+$)/g, "");
  if(str==null || str==""){
   alert("文本框内容为空");
  }else{
   alert("文本框内容为："+str);
  }
 }
</script>
 <BODY>
  <textarea id="textarea"></textarea>
 <input type="button" value="点击测试" οnclick="isNull()">
 </BODY>
</HTML>