JavaScript 事件/焦点

最新推荐文章于 2024-07-24 11:09:48 发布

呆呆敲代码丫

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量1.8k

点赞数 37

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46474458/article/details/107485040

版权

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        div {
            width: 150px;
            height: 150px;
            background: red;
            cursor: pointer;
        }
    </style>
    <script type="text/javascript">
        //onfocus: 获取焦点
        function 获取焦点() {
            var name_input = document.getElementById("name_span");
            name_input.innerText = "请输入内容";
            name_input.style.color = "green";
        }
        //onblur : 失去焦点	
        function 失去焦点() {
            var name_input = document.getElementById("name_span");
            var name = document.getElementById("username");
            if (name.value == "") {
                name_input.innerHTML = "你是不是没有输入东西.";
                name_input.style.color = "red";
                return false;
            } else {
                name_input.innerHTML = "输入正确";
                name_input.style.color = "blue";
                return true;
            }

        }
        //onchange: 改变元素时,触发的事件
        function 改变() {
            var city = document.getElementById("city");
            if (city.value == "") {
                var city_span = document.getElementById("city_span");
                city_span.innerHTML = "<i style='color: red;'>你是不是没有选择</i>";
                return false;
            } else {
                var city_span = document.getElementById("city_span");
                city_span.innerHTML = "<i style='color: blue;'>输入正确</i>";
                return true;
            }
        }
    </script>
</head>

<body>
    <form action="" method="post">
        姓名:<input type="text" onfocus="获取焦点()" onblur="失去焦点()" placeholder="请输入点东西丫丫" name="username" id="username" value="" />
        <span id="name_span"></span>
        <br /> 地址: <select name="city" id="city" onchange="改变()">
				<option value="">--请选择--</option>
				<option value="越南">--北京--</option>
				<option value="缅甸">--上海--</option>
				<option value="金三角">--广州--</option>
			</select>
        <span id="city_span"></span>
        <br />
        <input type="submit" onclick="return 提交表单()" value="提交" />
    </form>


</body>

</html>

在这里插入图片描述

用的中文声明,为了让你们更好的理解代码,请多多支持鸭!

呆呆敲代码丫

关注

37
点赞
踩
17

收藏

觉得还不错? 一键收藏
4
评论
JavaScript 事件/焦点

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <style type="text/css"> div { width: 150px; height: 150px; background: red;
复制链接

扫一扫