[已解决]如何去除刚进页面不点文本框直接点击按钮就触发了事件，且发布了请在此留言！想排除此

小黄练编程 · 发表于 2022-4-1 19:57:40

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>留言板</title>
                <style>
                textarea{
                        outline:none;
                }
                li{
                        dispaly:inline-block;
                /*         width:300px; */
                        height:40px;
                        border: 1px solid black;
                        margin-top:10px;
                        /* background-color:red; */
                }
                </style>
        </head>
        <body>
                <textarea id='text'>请在此留言！</textarea>
                <button id='btn'>发布留言</button>
                <ul>
                        <li></li>
                        <li></li>
                </ul>
        </body>
        <script>
        var  text=document.querySelector('#text');
        var  btn=document.querySelector('#btn');
        // var ul=document.getElementsByTagName('ul');
        var ul=document.querySelector('ul');
        console.log(ul.children);
        text.onfocus=function(){
                 if(text.value='请在此留言!')
                 {this.value='';}
         }
         text.onblur=function(){
                 if(text.value=='')
                 {this.value='请在此留言!';}
         }
        btn.onclick=function(){
                var lili=document.createElement('li');
                console.log(text.value);
                // if(text.value!=='请在此留言!'&& text.value!=='')
                if(text.value!=='请在此留言!' && text.value!=='')
                {
                    text.value='';
                        ul.insertBefore(lili,ul.children[0]);
                        lili.innerHTML=text.value;
                }
                else{
                alert('请输入留言！');
                }
        }
        
        </script>
</html>

最佳答案

月排行榜 / 总排行榜

ba21

2022-4-1 21:25:03

小黄练编程发表于 2022-4-1 20:43
就是打开这页面，直接点击发布留言按钮，结果直接输出了”请在此留言“，而不是弹出请输入留言警告框 ...

 <script>
        var  text=document.querySelector('#text');
        var  btn=document.querySelector('#btn');
        // var ul=document.getElementsByTagName('ul');
        var ul=document.querySelector('ul');
        text.value='请在此留言!'; //1
        text.onfocus=function(){
                 if(text.value='请在此留言!')
                 {this.value='';}
         }
         text.onblur=function(){
                 if(text.value=='')
                 {this.value='请在此留言!';}
         }
        btn.onclick=function(){
                var lili=document.createElement('li');
                
                if(text.value!=='请在此留言!' && text.value!=='') 
                {                
                    text.value='';
                        ul.insertBefore(lili,ul.children[0]);
                        lili.innerHTML=text.value;
                }
                else{
                alert('请输入留言！');
                }
        }
        
        </script>

跳转到最佳答案楼层

ba21 · 发表于 2022-4-1 20:31:39

??????????????????????????

小黄练编程 · 发表于 2022-4-1 20:43:55

ba21 发表于 2022-4-1 20:31
??????????????????????????

就是打开这页面，直接点击发布留言按钮，结果直接输出了”请在此留言“，而不是弹出请输入留言警告框。
就这最前面这次会出现问题，后面都不会出现，都会弹出请输入留言警告框，

ba21 · 发表于 2022-4-1 21:25:03

小黄练编程发表于 2022-4-1 20:43
就是打开这页面，直接点击发布留言按钮，结果直接输出了”请在此留言“，而不是弹出请输入留言警告框 ...

 <script>
        var  text=document.querySelector('#text');
        var  btn=document.querySelector('#btn');
        // var ul=document.getElementsByTagName('ul');
        var ul=document.querySelector('ul');
        text.value='请在此留言!'; //1
        text.onfocus=function(){
                 if(text.value='请在此留言!')
                 {this.value='';}
         }
         text.onblur=function(){
                 if(text.value=='')
                 {this.value='请在此留言!';}
         }
        btn.onclick=function(){
                var lili=document.createElement('li');
                
                if(text.value!=='请在此留言!' && text.value!=='') 
                {                
                    text.value='';
                        ul.insertBefore(lili,ul.children[0]);
                        lili.innerHTML=text.value;
                }
                else{
                alert('请输入留言！');
                }
        }
        
        </script>

账号		自动登录	找回密码
密码			立即注册