Js 判断输入框内容是否为空 Dom事件小例子

最新推荐文章于 2022-12-20 15:32:23 发布

SankeSShu

最新推荐文章于 2022-12-20 15:32:23 发布

阅读量1.1k

点赞数 2

分类专栏： Dom事件

本文链接：https://blog.csdn.net/weixin_44960612/article/details/89740205

版权

Dom事件专栏收录该内容

1 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
    <style>
    //外边框为 红色1像素
  .red{
    		border:1px solid red;
    	}
  </style>
</head>
<body>
 姓名：<input type="text"><span></span>
</body>
</html>

 
  var names = document.getElementsByTagName("input"),
       word = document.getElementsByTagName("span");
       
    // 给文本框绑定激活的事件
    var a = names [1];
    var b = word [0];
    console.log(a);
    console.log(b);
    
    //匿名函数
    a.onfocus=function(){
        //让提示文字显示出来
        b.innerHTML='<span>请输入姓名</span>';
    }
    
    //给文本框绑定失去焦点的事件
    a.onblur=function(){
    //获取文本框的值，value用于获取表单元素的值  
    var nameer =this.value;
    console.log(nameer); //检测自己值有没有传送进来
    
	//判断是否内容为字符串，并且内容是否为空
    if(nameer = String && nameer!=""){
    	//如果有内容输入，取消提示内容
        b.innerHTML='';
        //取消警示边框 class 为 空
        this.className="";
      }else{
        b.innerHTML="<span>用户名不能为空</span>";
        //给span标签增加红色为1px的边框 做警示作用
        this.className="red";
      }
    }

SankeSShu

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Js 判断输入框内容是否为空 Dom事件小例子

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
复制链接

扫一扫