JavaScript 事件/焦点

<!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>
在这里插入图片描述

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

猜你喜欢
