如题。前端页面的 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. 在eclipse中新建Dynamic web project时选择2.5和3.0的区别(里面涉及servlet和tomcat的问题)

    1.是指servlet的版本,是2.5的还是3.0的 servlet3.0以后支持异步 2.dynamic web module和对应的TOMCAT 版本 http://blog.sina.com.c ...

  2. 015_xml_函数

    015_xml_函数 --环境准备******************************************************************* USE test --f:/t ...

  3. 3DMAX-模型制作简介

    本文由博主(YinaPan)原创,转载请注明出处:http://www.cnblogs.com/YinaPan/p/3dmax_moxingzhizuo.html  一.快捷键: ALT + X 透明 ...

  4. ASP.NET MVC中的模型绑定

    模型绑定的本质   任何控制器方法的执行都受action invoker组件(下文用invoker代替)控制.对于每个Action方法的参数,这个invoker组件都会获取一个Model Binder ...

  5. Zsh安装CMake补全脚本进行CMake命令补全

    最近在尝试使用Zsh,发现其补全命令的功能相当厉害.但对CMake命令的补全在默认的5.0.5中好像没有看到,网上找了下关于配置Zsh补全的文章也没有多少.     于是自己动手,发现在Zsh安装目录 ...

  6. C++ Primer 5th 第12章 动态内存

    练习12.1:在此代码的结尾,b1 和 b2 各包含多少个元素? StrBlob b1; { StrBlob b2 = {"a", "an", "th ...

  7. [前端笔记]第一篇:html

    什么是 HTML? HTML 是用来描述网页的一种语言.HTML 指的是超文本标记语言 (Hyper Text Markup Language)HTML 不是一种编程语言,而是一种标记语言 (mark ...

  8. linux c数据库备份第二版

    #想知道更多请查看第一版"linux c数据库备份第一版" #include<sys/types.h> #include<sys/wait.h> #incl ...

  9. Color the ball

    hdu1556:http://acm.hdu.edu.cn/showproblem.php?pid=1556 题意:中文题. 题解:这一题当然可以直接用线段树来打,但是最近在学树状数组,所以用树状数组 ...

  10. Web分析日志

    http://www.docin.com/p-649515490.html http://wenku.baidu.com/link?url=kB-83fbl1Zc3Y6U2BYLj-lKMWShe8Z ...