如题。前端页面的 input textarea 有时候须要显示默认文字以提示用户,下面为实现代码,以 input 为例。textarea 能够直接搬用

HTML

<input type="text" id="content" name="content" value="请输入内容"/>

CSS

<style type="text/css">
#content{color:#ccc; }
</style>

JavaScript

<script>
$("#content").focus(function(){
if(this.value == this.defaultValue) {
this.value='';
$(this).css('color','#000');
}
}); $("#content").blur(function(){
if(this.value == '') {
this.value=this.defaultValue;
$(this).css('color','#ccc');
}
});
});
</script>

End .

【前端JS】input textarea 默认文字,点击消失的更多相关文章

  1. input框内默认文字点击消失

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. HTML5轻松实现搜索框提示文字点击消失---及placeholder颜色的设置

    在做搜索框的时候无意间发现html5的input里有个placeholder属性能轻松实现提示文字点击消失功能,之前还傻傻的在用js来实现类似功能... 示例 <form action=&quo ...

  3. input输入框默认文字,点击消失

    <input type="text" value="请输入用户名" onfocus="if(value=='请输入用户名') {value='' ...

  4. input内文字点击消失 弹出层,可以写表单

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

  5. 设计input搜索框提示文字点击消失的效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. textarea 默认文字获取焦点失去焦点

    <textarea name="textarea" cols="" title="contactForm" class="t ...

  7. js计算textarea输入文字的长度

    前言 日常开发过程中,有些时候我们想使用textarea,然后限制输入的长度,在textarea末尾显示剩余可输入的字节数. 如下图:  解决方法: 常用的有三种方法: 1.通过判断charCodeA ...

  8. ECSHOP搜索框文字点击消失

    <input name="keywords" type="text" id="keyword" value="黄山金银币&q ...

  9. 关于input/textarea提交内容空格回车转换问题,以及ng-model去除空格问题

    input/textarea提交内容空格回车转换问题 /*my-enter-bind.js*/ /*回车换行显示转义*/ 'use strict'; angular.module('app') .di ...

随机推荐

  1. XML样本(格式没区别,但是一个有结果 一个没结果)

    xml样本01<orderlist>        <order>        <orderid>1</orderid>        <ord ...

  2. iOS面试题整理(一)

    代码规范 这是一个重点考察项,曾经在微博上发过一个风格纠错题: 也曾在面试时让人当场改过,槽点不少,能够有 10 处以上修改的就基本达到标准了(处女座的人在这方面表现都很优秀 一个区分度很大的面试题 ...

  3. sae crop 文档

    原文是google缓存:http://webcache.googleusercontent.com/search?q=cache:MD_FP-G6RI8J:sae.sina.com.cn/%3Fm%3 ...

  4. linux makefle学习

    学习材料取之这个网址:http://blog.chinaunix.net/uid-27717694-id-3696246.html 学习环境:ubuntu10.04-64bit-desktop版,gc ...

  5. Linux导航神器-----autojump

    对于命令行用户来说,频繁的cd和tab应该是日常工作中最多使用的命令了.特别对于重度用户来说,如果可以省去这么多cd和tab,将更多的时间做有意义的事该多好.其实Linux的学习过程本身就行这样.你会 ...

  6. WPS 去掉自动打开的文档漫游和在线模板

    关闭文档漫游  在cmd(命令提示符)中输入regedit.exe回车,将弹出”注册表编辑器“,选择HKEY_CURRENT_USER>>Software>>Kingsoft& ...

  7. Oauth支持的5类 grant_type 及说明

    authorization_code 授权码模式(即先登录获取code,再获取token) password 密码模式(将用户名,密码传过去,直接获取token) client_credentials ...

  8. Dede 查询附加表

    <!--使用dede:arclist取出信息 dede_archives 表 $sql="Select 字段 from dede_archivies",但是在默认情况下 de ...

  9. 由于权限不足而无法读取配置文件出现的HTTP 500.19解决办法

    无法访问请求的页面,因为该页的相关配置数据无效. 如下图: 解决方法, 到站点目录的属性,安全标签,添加用户(Everyone),并给修改权限:

  10. 水仙花 AC 杭电

    水仙花数 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Submi ...