文本框内容为空时边框变为红色。js控制文本框的class

最新推荐文章于 2023-04-19 23:13:45 发布

zhi0326

最新推荐文章于 2023-04-19 23:13:45 发布

阅读量2.7k

点赞数

分类专栏： js和css 文章标签： JavaScript CSS HTML ViewUI

js和css 专栏收录该内容

7 篇文章

订阅专栏

本文提供了一个使用HTML、CSS及JavaScript实现的简单文本框验证示例。通过为文本框设置边框颜色来提示用户输入状态，为空时显示红色边框。

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
     <title>
     </title>
     <!--设置文本框的边框颜色和样式-->
     <style type="text/css">
       .input{
	   border-color:#FF0000;
	   border-style:solid;
	   }
     </style>
     <script type="text/javascript" language="javascript" >
	 <!--当文本框为空时，加载css的方法-->
        function fun(test){
		  var value= document.getElementById(test).value;
		  var object= document.getElementById(test);
		  if(value==null||value==''){
		    object.setAttribute("className","input");
		  }else{
		    object.setAttribute("className","");
		  }
		    
		}
     </script>
  </head>
  <body>
    <input type="text" onBlur="fun('user_name')" id="user_name" >  
  </body>
</html>