js:聚焦和失焦事件示例

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>4.聚焦和失焦</title></head><body><div>用户名: <input type="text" name="userName" onfo

亦昕跑的码

6948人浏览 · 2022-01-03 22:03:29

亦昕跑的码 · 2022-01-03 22:03:29 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.聚焦和失焦</title>
</head>
<body>
    <div>
        用户名: <input type="text" name="userName" onfocus="testFocus(this)" onblur="testBlur(this)">
    </div>
    <div id="msg"></div>
</body>
<script>
    //聚集:当光标在文本框中,文本框无内容时,提示 "请输入4~12位的用户名" ,文本框中有内容时,显示文本框内容
    function testFocus(that) {
        if (that.value){
            //alert(that.value);
            document.getElementById("msg").innerHTML = that.value;
        }else {
            //alert("请输入4~12位的用户名");
            document.getElementById("msg").innerHTML = "请输入4~12位的用户名"
        }
    }

    //失焦:当光标离开文本框,文本框中无内容 则提示"用户名不能为空",有内容则显示文本框内容
    function testBlur(that) {
        if (that.value){
            //alert(that.value);
            document.getElementById("msg").innerHTML = that.value;
        }else {
            //alert("请输入4~12位的用户名");
            document.getElementById("msg").innerHTML = "用户名不能为空"
        }
    }
</script>
</html>