问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答

这个为什么鼠标移除后，input的value为空而不是你输入的内容

头像
hackerws
    1.4k21117134
    头像
    scort
      8.4k2633
      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <style type="text/css">
        .ipt{width:500px;position:fixed;left:500px;top:100px;}
        .input{color:#a8a8a8;}
    </style>
</head>
<body>
    <div id="d1">
        <p>123</p>
    </div>
    <div class="ipt">
        <input class="input" type="ipnut" value="请输入内容..."/>
        
        <input type="button" value="添加"/>
        <input type="button" value="删除"/>
    </div>
 
    <script type="text/javascript">
        var btnI=document.getElementsByTagName('input')[0];
        var btnC=document.getElementsByTagName('input')[1];
        var btnR=document.getElementsByTagName('input')[2];
        var d1=document.getElementById('d1');
        /*input效果-开始*/
        //获取焦点
        btnI.onfocus=function(){
           if(btnI.getAttribute('value')=="请输入内容..."){
               btnI.setAttribute("value","");
               btnI.style.color="#000";
           }           
        }
        //失去焦点
        btnI.onblur=function(){
            if(btnI.getAttribute('value')==""){
                btnI.setAttribute("value","请输入内容...");
                btnI.style.color="#a8a8a8";
            }else{
                var txt=btnI.getAttribute("value");
                btnI.setAttribute("value",txt);
                btnI.style.color="#000";
            }
           
        }
        
          /*input效果-结束*/
        
        
        btnC.onclick=function(){
            var p=document.createElement('p');
            var txt=document.createTextNode();
            p.appendChild(txt);
            d1.appendChild(p);
           
        }
    </script>
</body>
</html>
      

我想实现的效果是，等输入框失去焦点时，input的value值为你输入的内容，但这里input的值一直为空
      javascript
      阅读 4.8k
      4 个回答
      得票最新
      头像
      请低下头
        281
        ✓ 已被采纳

        <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
        <html>
        <head>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<style type="text/css">
    .ipt{width:500px;position:fixed;left:500px;top:100px;}
    .input{color:#a8a8a8;}
</style>

        </head>
        <body>

        <div id="d1">
    <p>123</p>
</div>
<div class="ipt">
    <input class="input" type="text" placeholder="请输入内容..."/>
    
    <input type="button" value="添加"/>
    <input type="button" value="删除"/>
</div>

<script type="text/javascript">
    var btnI=document.getElementsByTagName('input')[0];
    var btnC=document.getElementsByTagName('input')[1];
    var btnR=document.getElementsByTagName('input')[2];
    var d1=document.getElementById('d1');
    /*input效果-开始*/
    //获取焦点
    // btnI.onfocus=function(){
    //    if(btnI.getAttribute('placeholder')=="请输入内容..."){
    //        btnI.setAttribute("value","");
    //        btnI.style.color="#000";
    //    }           
    // }
    //失去焦点
    btnI.onblur=function(){
        if(btnI.value==""||btnI.value==null){
            btnI.value="请输入内容...";
            btnI.style.color="#a8a8a8";
        }else{
            var txt=btnI.value;
            btnI.value=txt;
            btnI.style.color="#000";
        }
       
    }
    
      /*input效果-结束*/
    
    
    btnC.onclick=function(){
        var node=document.createElement('p');
        var textnode=document.createTextNode(btnI.value);
        node.appendChild(textnode);
        d1.appendChild(node)
       
       
    }
</script>

        </body>
        </html>

        头像
        michael_cai
          10.6k3840

          当然为空啊，你给它添加了吗？

          要这个效果你用placeholder不就好了？

          头像
          php小菜鸟
            3k6113165

            根本就不需要那么搞，像楼上说的

             <input class="input" type="ipnut" value="" placeholder=“请输入内容...”/>
 
 就一个简单的功能，根本不需要事件来控制
            头像
            floatsword
              301

              按楼上几位说的用placeholder就好了，如果非要自己写的话，不要用getAttribute来获取value ，直接用elem.value就好

              撰写回答
              你尚未登录，登录后可以
              • 和开发者交流问题的细节
              • 关注并接收问题和回答的更新提醒
              • 参与内容的编辑和改进，让解决方法与时俱进
              推荐问题