原生js-onchange/onkeyup

最新推荐文章于 2023-10-25 17:54:42 发布

宝拉不想努力了

最新推荐文章于 2023-10-25 17:54:42 发布

阅读量2k

点赞数

分类专栏： js Problem

本文链接：https://blog.csdn.net/weixin_41056807/article/details/83032793

版权

js 同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

Problem

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange</title>
    <script>
        function myFunction(){
            var x=document.getElementById("fname");
            x.value=x.value.toUpperCase();
        }
    </script>
</head>
<body>
输入你的名字: <input type="text" id="fname" onchange="myFunction()">
<p>当光标离开输入框后，函数将被触发，将小写字母转为大写字母。</p>
</body>
</html>

在这里插入图片描述
输入小写字母之后

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>onchange</title>
    <style type="text/css">
        #kuang {
            width: 360px;
            height: 36px;
            line-height: 36px;
            background-color: #f0f0f0;
            border: 2px solid #2e2e2e;
            font-size: 16px;
            border-radius: 7px;
            /*border-radius: 50%;*/
            /*overflow: hidden;*/
        }
        #warning{
            width: 90px;
            color: #e9322d;
            font-size: 13px;
            margin-top: 0;
            display: none;
        }
    </style>
</head>
<body>
<input type="text" onkeyup="tan()" placeholder="请输入账户" id="kuang">
<p id="warning">请输入用户名</p>
<script>
    function tan() {
        var a = document.getElementById('kuang').value;
        var ab = document.getElementById('kuang');

        console.log(a);
        var b=  document.getElementById('warning');
        if(a==""){
            ab.style.border=2+'px solid red';
            b.style.display='block';
        }else{
            ab.style.border= 2 +'px solid white';
        }
    }
</script>
</body>
</html>

初始状态
在这里插入图片描述
输入一些字符

然后将字符 backspace
提示框会出现：

知识点

这里就是input 文本框和下面的文字会在没有输入内容的时候出现
分别给文本框和出现的文字设置ID
先说文本框，id=“kuang”，JavaScript中var两个变量分别存他的value值还有就是这个标签，这里特别注意这是两个不同的概念
var a = document.getElementById(‘kuang’).value;
var ab = document.getElementById(‘kuang’);
当为空的时候出现文本的样式
再说p标签的文字，是先display：none隐藏，当为空的时候block

宝拉不想努力了

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js-onchange/onkeyup

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;onchange&lt;/title&gt; &lt;script&gt; function myFunction(){
复制链接

扫一扫

专栏目录