如题。前端页面的 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. OC - 19.pthread和NSThread

    简介 恰当的使用多线程编程可以提供任务的执行效率和系统资源的利用率 多线程是为了提高资源利用率,和应用程序的响应速度,多个线程共享应用资源 每个应用程序都有一个主线程,通常用来做UI界面刷新等 比较耗 ...

  2. 17个提升iOS开发效率的必用工具

    时间就是金钱.编码效率的提升意味着更多的收入.可是当我们的开发技巧已经到达一定高度时,如何让开发效率更上一层楼呢?答案就是使用开发工具!在这篇文章中,我会向你介绍一些帮助我们提升编码速度和工作效率的工 ...

  3. Swift - 30 - 可变参数

    //: Playground - noun: a place where people can play import UIKit // 可变参数一定要放在所有定义参数的最后面, 和其他参数的定义方式 ...

  4. 网络编程Socket之UDP

    服务器端实现步骤: 1. 创建 DatagramSocket,指定端口号 2. 创建 DatagramPacket 3. 接收客户端发送的数据信息 4. 读取数据 package cn.jmu.edu ...

  5. DOM4J 读取XML配置文件进行数据库连接

        介绍介绍DOM4J.    据说是非常优秀非常优秀的Java XML  API(Dom4j is an easy to use, open source library for working ...

  6. Selenium 下载URL

    http://mvnrepository.com/artifact/org.seleniumhq.selenium

  7. Hibernate的CRUD

    1.CRUD: C:sesion.save() R:session.get()? session.load() D:session.delete() U:session.update() 2.读取数据 ...

  8. Mac系统下安装PIL

    安装PIL依赖JPEG.Freetype.LittleCMS, 首先安装这三个环境(第一至三步): 第一步:安装JPEG http://www.ijg.org/files/jpegsrc.v8c.ta ...

  9. dict两种遍历方法

    采用for...in...遍历: >>> for i in dd: ... print("%s:%s"%(i,dd[i])) ... :chen :hang :w ...

  10. iOS编程修改系统音量

    iOS的AVFoundation框架提供了基本的音视频播放工具,我们基本上可以靠其中提供的类完成绝大部分的音视频播放任务.但是在音频播放的输出音量的处理上,苹果的策略比较保守.尽管AVPlayer和A ...