[Javascript]如何在HTML中实现点击input输入框（获得焦点）后默认提示消失的效果...

最新推荐文章于 2022-10-22 20:29:55 发布

iteye_19603

最新推荐文章于 2022-10-22 20:29:55 发布

阅读量1.2k

点赞数

文章标签： javascript 前端 php ViewUI

在写HTML的时候经常会遇到输入框需要输入提示的情况，也就是点击文本框后提示内容自动消失。

例如以下场景，是一个简单的默认提示：

点击输入的时候十分麻烦，需要将提示删除才可以。

如何HTML中实现点击input输入框（也就是获得焦点）后，准备输入的时候，让默认提示消失？

代码如下：

<html>
<head></head>
<body>

<input type="text" value="请输入用户名" 
οnfοcus="if(value=='请输入用户名') {value=''}" 
οnblur="if (value=='') {value='请输入用户名'}"/>
<br>
<input type="text" style="color: rgb(153, 153, 153);" value="请输入用户名" 
οnfοcus="if(value=='请输入用户名') {value='';}this.style.color='#000';" 
οnblur="if (value=='') {value='请输入用户名';this.style.color='#999';}"/>

</body>
</html>

当然也可以用Javascript脚本更好的控制input的响应事件，前提是要引入jquery.js脚本文件：

<html>
<head>
<script type="text/javascript" src=<?php echo"$base/jquery.js";?>></script>
<script type="text/javascript">
$(document).ready(function(){
  $("input").focus(function(){
    $("input").css("background-color","#FFFFCC");
  });
  $("input").blur(function(){
    $("input").css("background-color","#D6D6FF");
  });
});
</script>
</head>
<body>
Enter your name: <input type="text" />
<p>请在上面的输入域中点击，使其获得焦点，然后在输入域外面点击，使其失去焦点。</p>
</body>
</html>

iteye_19603

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[Javascript]如何在HTML中实现点击input输入框（获得焦点）后默认提示消失的效果...

在写HTML的时候经常会遇到输入框需要输入提示的情况，也就是点击文本框后提示内容自动消失。例如以下场景，是一个简单的默认提示：点击输入的时候十分麻烦，需要将提示删除才可以。如何HTML中实现点击input输入框（也就是获得焦点）后，准备输入的时候，让默认提示消失？代码如下：&lt;html&gt;&lt;head&gt;&lt;/head&gt;&lt;body...
复制链接

扫一扫