dom啦18 表单效果

原创

陈业贵的博客 2021-11-16 16:16:35 博主文章分类：JSDOM ©著作权

文章标签 html 搜索数据 javascript 输入框 文章分类 Html/CSS 前端开发

©著作权归作者所有：来自51CTO博客作者陈业贵的博客的原创作品，请联系作者获取转载授权，否则将追究法律责任

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<form action="http://www.it666.com">
    <input type="text" placeholder="请输入搜索关键字" name="text">
    <input type="submit" value="搜索"><!-- disabled="disabled"-->
</form>
<script type="text/javascript">
	/*
    需求: 输入框中没有内容就禁用提交按钮
    */
    let oText = document.querySelector("input[type=text]");
    let oSubmit = document.querySelector("input[type=submit]");
    oSubmit.disabled=true;//不可用
    oText.oninput=function()//输入的时候当输入字符的时候就可用了,不然不可用
    {
    	oSubmit.disabled=this.value.length===0;//false可用.
    }
    // 注意点: 如果是通过代码给input设置的数据, 那么不会触发oninput事件
   oText.value = "abc";
</script>
</body>
</html>