输入框输入改变样式

最新推荐文章于 2021-08-02 13:25:22 发布

屿东

最新推荐文章于 2021-08-02 13:25:22 发布

阅读量602

点赞数

文章标签： javascript jquery

本文链接：https://blog.csdn.net/L2395183536/article/details/111174368

版权

输入框输入改变样式

正式开始在CSDN写博客，这个效果之前一直想用原生js实现，但一直没有解决，在CSDN上只找到了用jquery写的方法，现已解决，分享给其他小伙伴，废话不多说，直接上代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>输入框输入改变样式</title>
</head>
<body>
    <input type="text" id="a" value="" oninput="tanchu()">
    <script>
        // 第一种办法：用原生js实现
function tanchu(){
    var a=document.getElementById("a").value;
    var b=document.getElementById("a")
        if(a.length>0){
     b.style.color="red";    
    }else{
        b.style.color="blue";
    }
}
    </script>
<script type="text/javascript" src="//code.jquery.com/jquery-1.8.2.min.js"></script>
<script>
/* 第二种办法：用jqury来实现
 $(function(){
     监听输入框聚焦事件
      $("input").on("focus",function () {
            $(this).parent().addClass("active");
            if( $(this).val().length > 0){
                $(this).next(".a").show();
            }else{
                $(this).next(".a").hide();
            }
        }) 
      }) */
</script>
</body>
</html>

在这里插入图片描述

屿东

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
输入框输入改变样式

输入框输入改变样式正式开始在CSDN写博客，这个效果之前一直想用原生js实现，但一直没有解决，在CSDN上只找到了用jqury写的方法，现已解决，分享给其他小伙伴，废话不多说，直接上代码。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-sca
复制链接

扫一扫