设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 如何去除刚进页面不点文本框直接点击按钮就触发了事件， ...
返回列表 发新帖
查看: 2371|回复: 3

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

[复制链接]
小黄练编程
发表于 2022-4-1 19:57:40 | 显示全部楼层 |阅读模式

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

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

x
  1. <!DOCTYPE html>
  2. <html>
  3.         <head>
  4.                 <meta charset="utf-8">
  5.                 <title>留言板</title>
  6.                 <style>
  7.                 textarea{
  8.                         outline:none;
  9.                 }
  10.                 li{
  11.                         dispaly:inline-block;
  12.                 /*         width:300px; */
  13.                         height:40px;
  14.                         border: 1px solid black;
  15.                         margin-top:10px;
  16.                         /* background-color:red; */
  17.                 }
  18.                 </style>
  19.         </head>
  20.         <body>
  21.                 <textarea id='text'>请在此留言！</textarea>
  22.                 <button id='btn'>发布留言</button>
  23.                 <ul>
  24.                         <li></li>
  25.                         <li></li>
  26.                 </ul>
  27.         </body>
  28.         <script>
  29.         var  text=document.querySelector('#text');
  30.         var  btn=document.querySelector('#btn');
  31.         // var ul=document.getElementsByTagName('ul');
  32.         var ul=document.querySelector('ul');
  33.         console.log(ul.children);
  34.         text.onfocus=function(){
  35.                  if(text.value='请在此留言!')
  36.                  {this.value='';}
  37.          }
  38.          text.onblur=function(){
  39.                  if(text.value=='')
  40.                  {this.value='请在此留言!';}
  41.          }
  42.         btn.onclick=function(){
  43.                 var lili=document.createElement('li');
  44.                 console.log(text.value);
  45.                 // if(text.value!=='请在此留言!'&& text.value!=='')
  46.                 if(text.value!=='请在此留言!' && text.value!=='')
  47.                 {
  48.                     text.value='';
  49.                         ul.insertBefore(lili,ul.children[0]);
  50.                         lili.innerHTML=text.value;
  51.                 }
  52.                 else{
  53.                 alert('请输入留言！');
  54.                 }
  55.         }
  56.        
  57.         </script>
  58. </html>
复制代码
最佳答案
月排行榜 / 总排行榜
ba21
2022-4-1 21:25:03
小黄练编程 发表于 2022-4-1 20:43
就是 打开这页面，直接点击发布留言按钮，结果直接输出了”请在此留言“，而不是弹出请输入留言警告框 ...
  1. <script>
  2.         var  text=document.querySelector('#text');
  3.         var  btn=document.querySelector('#btn');
  4.         // var ul=document.getElementsByTagName('ul');
  5.         var ul=document.querySelector('ul');
  6.         text.value='请在此留言!'; //1
  7.         text.onfocus=function(){
  8.                  if(text.value='请在此留言!')
  9.                  {this.value='';}
  10.          }
  11.          text.onblur=function(){
  12.                  if(text.value=='')
  13.                  {this.value='请在此留言!';}
  14.          }
  15.         btn.onclick=function(){
  16.                 var lili=document.createElement('li');
  17.                
  18.                 if(text.value!=='请在此留言!' && text.value!=='')
  19.                 {               
  20.                     text.value='';
  21.                         ul.insertBefore(lili,ul.children[0]);
  22.                         lili.innerHTML=text.value;
  23.                 }
  24.                 else{
  25.                 alert('请输入留言！');
  26.                 }
  27.         }
  28.         
  29.         </script>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

ba21
发表于 2022-4-1 20:31:39 | 显示全部楼层
??????????????????????????
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

小黄练编程
 楼主| 发表于 2022-4-1 20:43:55 | 显示全部楼层
ba21 发表于 2022-4-1 20:31
??????????????????????????


就是 打开这页面，直接点击发布留言按钮，结果直接输出了”请在此留言“，而不是弹出请输入留言警告框。
就这最前面这次会出现问题，后面都不会出现，都会弹出请输入留言警告框，
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

ba21
发表于 2022-4-1 21:25:03 | 显示全部楼层    本楼为最佳答案   
小黄练编程 发表于 2022-4-1 20:43
就是 打开这页面，直接点击发布留言按钮，结果直接输出了”请在此留言“，而不是弹出请输入留言警告框 ...
  1. <script>
  2.         var  text=document.querySelector('#text');
  3.         var  btn=document.querySelector('#btn');
  4.         // var ul=document.getElementsByTagName('ul');
  5.         var ul=document.querySelector('ul');
  6.         text.value='请在此留言!'; //1
  7.         text.onfocus=function(){
  8.                  if(text.value='请在此留言!')
  9.                  {this.value='';}
  10.          }
  11.          text.onblur=function(){
  12.                  if(text.value=='')
  13.                  {this.value='请在此留言!';}
  14.          }
  15.         btn.onclick=function(){
  16.                 var lili=document.createElement('li');
  17.                
  18.                 if(text.value!=='请在此留言!' && text.value!=='')
  19.                 {               
  20.                     text.value='';
  21.                         ul.insertBefore(lili,ul.children[0]);
  22.                         lili.innerHTML=text.value;
  23.                 }
  24.                 else{
  25.                 alert('请输入留言！');
  26.                 }
  27.         }
  28.         
  29.         </script>
复制代码
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复 支持 反对

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-6-5 09:43

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表