js——input获取焦点-onfocus和失去焦点-onblur & 自动获取焦点-autofocus=autofocus & onchange 事件会在域的内容改变时发生

最新推荐文章于 2024-02-16 17:42:45 发布

viceen

最新推荐文章于 2024-02-16 17:42:45 发布

阅读量2.3k

点赞数 2

分类专栏： js知识文章标签： html css

本文链接：https://blog.csdn.net/weixin_44867717/article/details/117912540

版权

js知识专栏收录该内容

152 篇文章 12 订阅

订阅专栏

js——input获取焦点-onfocus和失去焦点-onblur & 自动获取焦点-autofocus=“autofocus” & onchange 事件会在域的内容改变时发生

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h2>js——input获取焦点和失去焦点</h2>
    <h4>onfocus-获取焦点 ； onblur-失去焦点</h4>
    <!-- onfocus获取焦点  ； onblur 失去焦点 -->
    <!-- input输入框自动获取焦点，只要在该input标签后添加autofocus="autofocus"即可 -->
    <!-- 案例一 -->
    <h3>案例一</h3>
    <input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value=''}" onblur="if (value=='') {value='请输入用户名'}">
    <!-- 案例二 -->
    <h3>案例二</h3>
    用户名：<input type="text" id="username" name="username" autofocus="autofocus" /><br />
    密码：<input type="text" id="password" name="password" /><br />
    <input type="submit" name="submitBtn" value="提交" />
    <!-- 案例三 -->
    <h3>案例三</h3>
    <input type="text" value="手机" id="int">
    <script>
        var int = document.getElementById("int");
        int.onblur = function () {
            int.value = "手机";
        }
        int.onfocus = function () {
            int.value = "";
        }
    </script>
    <!-- 案例四 -->
    <!-- chang()和onfocus()、onblur()用法都类似 -->
    <!-- onchange 事件会在域的内容改变时发生。    onchange 事件也可用于单选框与复选框改变后触发的事件。 -->
    <h3>案例四</h3>
    输入您的姓名： <input type="text" id="fname" onchange="upperCase(this.id)" />
    <script type="text/javascript">
        function upperCase(x) {
            var y = document.getElementById(x).valuedocument.getElementById(x).value = y.toUpperCase()
        }
    </script>
</body>

</html>

效果

在这里插入图片描述

viceen

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js——input获取焦点-onfocus和失去焦点-onblur & 自动获取焦点-autofocus=autofocus & onchange 事件会在域的内容改变时发生

js——input获取焦点-onfocus和失去焦点-onblur & 自动获取焦点-autofocus=“autofocus”代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <tit
复制链接

扫一扫