零基础建站培训介绍

当前位置:

JQuery实现input点击去掉文字

在实现做网站过程中,我们需要经常在自己的网站中添加一个表单。表单里有很多的input输入框,为了用户体验的需要,可以在input框中添加一些提示文字。如下图所示:JQuery实现input点击去掉文字

下面我们来讲一下如何实现input点击去掉文字,并且输入文字时,它的颜色为黑色。

第一步:书写提交表单的HTML代码:

昵称:<input type="text" value="请输入用户名" class="username" onfocus="myclick()"><br/>
密码:<input type="text" value="请输入密码" class="username" ><br/>
<input type="submit" value="提交" >

第二步:给表单的HTML添加一些CSS样式,使用INPUT里的文字的颜色为灰色。

<style>
.username{color:#999;}
input{widht:300px;height:40px;line-height:40px;margin-bottom:10px;}
input[type="submit"]{padding:0 90px;}
</style>

第三步:使用JQUERY实现我们光标点击input输入框时,文字消失。

<script type="text/javascript">
function myclick(){
$("input[type='text']").val("");

$("input[type='text']").removeClass("username");
}

</script>

Jquery代码解释:

$("input[type='text']").val("");

通过val()方法设置input里的value值,当光标点击时为空;

$("input[type='text']").removeClass("username");

通过removeClass()方法来删除class类username。

以上是我们在自己建网站时,通过JQUERY实现input点击文字消失的方法,在我们制作网站的注册登录功能时,很实用。(相关知识:如何制作WP网站的登录功能,注册功能

上一课: 下一课:

发表评论

相关教程

  1. 图片与文字混排对齐CSS样式【vertical-align属性】
  2. 75款常用的jquery特效前端网页代码
  3. Wordpress 创建配置文件 点击没反应解决方法
  4. jquery遍历数组 each()
  5. 如何查询域名是否已被成功注册?
  6. Jquery图片弹出相册展示插件lightbox plus
  7. 如何制作网站图片轮播特效(JQuery banner 轮播)
  8. jquery图片懒加载实现原理及方法
  9. Jquery如何实现商城网站的购物车结算功能(附代码)
  10. 如何给button按钮添加点击弹出窗口(jquery事件)