鼠标点击输入框文字消失 value实现方法  placeholder实现方法     以及JQ实现placeholder效果

<input type="text" value="请输入手机号" id="demo" class="inp-fon">
<input type="text" value="请输入银行卡号" id="demo" class="inp-fon">
<input type="text" value="请输入" id="demo" class="inp-fon">
<input name="textfield"type="text"value="点击添入标题"onfocus="if (value =='点击添入标题'){value =''}"onblur="if (value ==''){value='点击添入标题'}"/>
<input type="text" onfocus="this.placeholder = ''" onblur=" this.placeholder='' " placeholder="输入手机号/账户号" />
<textarea name="textarea"cols="80"rows="17"onfocus="if(value=='正文:'){value=''}"onblur="if (value ==''){value='正文:'}"></textarea>
<script>
$("input").focusin(function(){
var oldValue = $(this).val();
if(oldValue == this.defaultValue){
$(this).val("");
}
}).blur(function(){

var oldValue = $(this).val();
if(oldValue == ""){
$(this).val(this.defaultValue);
}
});
</script>

鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)的更多相关文章

  1. JavaScript001,鼠标点击改变文字或图片

    <h3>我的第一个Javascript</h3> <p id="demo1">1.点击按钮,改变内容!</p> <!-- 设置 ...

  2. 鼠标点击自定义文字展现特效JS代码

    JS特效使用方法 只需将如下JS代码放到</body>之前就好了 var a_idx = 0; jQuery(document).ready(function($) { $("b ...

  3. Js制作点击输入框时默认文字消失的效果

    (从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...

  4. 小问题总结:鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现

    问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示:   做法如下: <input type="text" name ...

  5. 输入框获取焦点后placeholder文字消失、修改placeholder的样式

    输入框获取焦点后placeholder文字消失: <input placeholder='' onfocus="this.placeholder=''" onblur=&qu ...

  6. jQuery, 文本框获得焦点后, placeholder提示文字消失

    文本框获得焦点后, 提示文字消失, 基于jQuery, 兼容性: html5 //所有文本框获得焦点后, 提示文字消失 $('body').on('focus', 'input[placeholder ...

  7. html5文本框提示文字属性为placeholder

    html5文本框提示文字属性为placeholder 例子:  <textarea id="comment" class="commentCont"  n ...

  8. JS控制鼠标点击事件

    鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...

  9. 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏

    示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...

随机推荐

  1. 解决Tomcat无法shutdown进程

    转自:http://my.oschina.net/yongyi/blog/405198 问题分析 这个在windows下没有碰到过,因为此前跑Tomcat都是以服务而不是命令脚本的形式跑的,而且已经换 ...

  2. Java学习-041-颜色工具类(RGB,HEX)

    在日常的网页开发中,经常需要进行颜色数值获取.转换,例如获取红色,获取蓝色,获取绿色,RGB转十六进制颜色,十六进制颜色转RGB等,因而在学习过程中,写了一个小工具类,仅供各位小主参考! 多不闲言,直 ...

  3. 史上最臭名昭著五大软件Bug

    在现今数字年代,计算机bug不但困扰着每个程序员,更会无可避免影响我们的生活,小到每个人的衣食住行,大到国家经济,世界局势.随着我们的生活方式渐渐的数字化.互联网化,数字世界的找虫和杀虫就变得越来越重 ...

  4. Xcode命令行生成Bitcode静态库

    近两三年一直在做静态库开发 1.在Xcode工程中创建静态库的Target,最初是手动Build出真机的.a文件,模拟器的.a文件,然后再用命令行合并 2.后来一些特殊的开发者,要求加入特殊的功能,或 ...

  5. 创建XMLHttpRequest对象方法

    ~~~ //创建XMLHttpRequest对象 function creatXmlHttpRequest() { var xmlHttp; try{ //非IE浏览器使用 xmlHttp = new ...

  6. linux----------纯净的centos7.0上安装lnmp环境的步骤

    1.先看下screen -S lnmp 命令是否存在,不存在则安装.这个是个什么东东呢?百度一下( GNU Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接 ...

  7. gradle基础的build文件模板_jetty

    group '组织名' version '版本号' /* 支持的插件 */ apply plugin: 'java' // 项目基础变成语言支持为java apply plugin: 'war' // ...

  8. 解决Eclipse启动Tomcat时报Error loading WebappClassLoader错误

    最近新建了一个JSF项目(网上查到用Struts,Spring MVC也会如此),配置好以后用Eclipse启动Tomcat报了如下错误:严重: Error loading WebappClassLo ...

  9. 企业信息系统——CRM

    客户关系管理系统(Customer Relationship Management)将客户看作是企业的一项重要资产,客户关怀是CRM的中心,其目的是与客户建立长期和有效的业务关系,在与客户的每个“接触 ...

  10. Openstack的keystone的user-role-list命令的使用

    直接在shell模式下执行 [root@node-5 ~]# keystone user-role-list WARNING: Bypassing authentication using a tok ...