两种方法实现text输入框中“请输入关键字”的提醒

最新推荐文章于 2024-01-03 16:24:16 发布

weixin_30326515

最新推荐文章于 2024-01-03 16:24:16 发布

阅读量617

点赞数

CC 4.0 BY-SA版权

文章标签：前端开发工具 ViewUI

原文链接：http://www.cnblogs.com/topzhao/p/9194094.html

本文介绍了一个简单的HTML页面，该页面包含两个输入框，并通过JavaScript实现了对第一个输入框的焦点获得与失去事件处理。当获得焦点时清除默认提示文字，而失去焦点且内容为空时则显示默认提示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div style="margin: 0 auto;width: 600px">
 9 <input id="i1" type="text" onfocus="Focus()" onblur="Blur()"  value="请输入关键字"/>
10 <input type="text" placeholder="请输入关键字">
11 </div>
12 
13 
14 <script>
15 
16     function Focus() {
17         var tag = document.getElementById('i1');
18         var  val =tag.value;  // 获取text中的值
19         if(val=="请输入关键字"){
20             tag.value='';
21         }
22     }
23     
24     function Blur() {
25         var tag = document.getElementById('i1');
26         var val = tag.value;
27         if(val.length==0){//判断长度是不是0
28             tag.value="请输入关键字"
29         }
30     }
31 
32 </script>
33 
34 </body>
35 </html>