获取焦点/失去焦点（onfocus/onblur）练习

最新推荐文章于 2022-03-05 10:41:17 发布

越努力越

最新推荐文章于 2022-03-05 10:41:17 发布

阅读量401

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_45353679/article/details/104332827

版权

JavaScript 专栏收录该内容

32 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的文本框输入验证方法，当文本框获取焦点时清空默认提示，失去焦点时检查输入内容的合法性：是否为空、是否为数字、长度是否符合要求，并给出相应提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文本框获取焦点，清空信息
文本框失去焦点时，
如果为空，提示不能为空，
如果为非数字，提示不合法，
如果长度小于6，提示“长度不够”
如果为数字，提示正确

    <input type="text" name="" id="text" value="输入内容（数字）" />
    <script>
        let txt = document.getElementById('text');
        //获取焦点
        txt.onfocus = function() {
                //判断内容是否变化
                if (this.value === this.defaultValue) {
                    this.value = '';
                }
            }
            //失去焦点
        txt.onblur = function() {
            if (this.value === '') {
                alert("内容不能为空");
            } else if (isNaN(this.value)) {
                alert("输入内容不合法")
            } else if (this.value.length < 6) {
                alert("长度不够");
            } else {
                alert("正确");
            }
        }
    </script>
</body>