如题。前端页面的 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. oracle系统包——dbms job用法(oracle定时任务)

    用于安排和管理作业队列,通过使用作业,可以使ORACLE数据库定期执行特定的任务. 一.dbms_job涉及到的知识点1.创建job:variable jobno number;dbms_job.su ...

  2. 用css样式,为表格加入边框

    Table 表格在没有添加 css 样式之前,是没有边框的.这样不便于我们后期合并单元格知识点的讲解,所以在这一节中我们为表格添加一些样式,为它添加边框. 在右侧代码编辑器中添加如下代码: <s ...

  3. Java学习----运算符与表达式

    一.运算符 1.算术运算符 +   -   *   /  %  ++  -- public class Test7 { public static void main(String[] args) { ...

  4. nodejs读取本地txt文件并输出到浏览器

    var fs = require('fs'); var chrome=""; //同步执行 function tongbu(){ var data =fs.readFileSync ...

  5. [Python笔记]第八篇:模块

    本篇主要内容:python常用模块用法介绍 什么是模块 模块,用一大段代码实现了某个功能的代码集合. 类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性 ...

  6. python3可变与不可变数据类型

    Python3中有六个标准的数据类型: Number(数字) String(字符串) List(列表) Dictionary(字典) Tuple(元组) Set(集合) 我理解的可变就是当一个变量创建 ...

  7. 或许是python yield最好的答案 ?

    地址:http://pyzh.readthedocs.org/en/latest/the-python-yield-keyword-explained.html#yield 译者: hit9 原文: ...

  8. Java获取ip地址的几种方法

    以下内容介绍下java获取ip地址的几种思路. 1.直接利用java.net.InetAddress类获取,不过这种方法只在windows环境下有效,在linux环境下只能获取localhost地址( ...

  9. 解决xp下无法通过windows installer服务安装此安装程序包。您必须安装带有更新版本Wi

    今天装 tortoisegit 的时候发现安装包不能使用.报错无法通过windows installer服务安装此安装程序包.您必须安装带有更新版本Windows Installer服务的Window ...

  10. $cordovaDialogs使用时遇到的问题

    1:按照http://ngcordova.com/docs/plugins/dialogs/文档介绍进行安装使用: //标题栏 .controller('TitleCtrl', function($s ...