dom啦18 表单效果

贵哥的编程之路

发布于 2020-10-28 11:08:01

2710

发布于 2020-10-28 11:08:01

<!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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2020/09/07 ，如有侵权请联系 cloudcommunity@tencent.com 删除

dom