鼠标点击输入框文字消失 value placeholder 以及JQ实现效果 (仿京东的输入框效果)
鼠标点击输入框文字消失 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实现效果 (仿京东的输入框效果)的更多相关文章
- JavaScript001,鼠标点击改变文字或图片
<h3>我的第一个Javascript</h3> <p id="demo1">1.点击按钮,改变内容!</p> <!-- 设置 ...
- 鼠标点击自定义文字展现特效JS代码
JS特效使用方法 只需将如下JS代码放到</body>之前就好了 var a_idx = 0; jQuery(document).ready(function($) { $("b ...
- Js制作点击输入框时默认文字消失的效果
(从已经死了一次又一次终于挂掉的百度空间人工抢救出来的,发表日期 2014-02-17) 为了提高用户体验和易用度,一些设计师会对网页中用户经常用的东西进行优化,比如输入框.一般的输入框是怎样优化的呢 ...
- 小问题总结:鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现
问题如标题: 鼠标点击到输入框(input)里的时候,输入框的提示消失,鼠标再移开,输入框提示出现.如图所示: 做法如下: <input type="text" name ...
- 输入框获取焦点后placeholder文字消失、修改placeholder的样式
输入框获取焦点后placeholder文字消失: <input placeholder='' onfocus="this.placeholder=''" onblur=&qu ...
- jQuery, 文本框获得焦点后, placeholder提示文字消失
文本框获得焦点后, 提示文字消失, 基于jQuery, 兼容性: html5 //所有文本框获得焦点后, 提示文字消失 $('body').on('focus', 'input[placeholder ...
- html5文本框提示文字属性为placeholder
html5文本框提示文字属性为placeholder 例子: <textarea id="comment" class="commentCont" n ...
- JS控制鼠标点击事件
鼠标点击事件就是当鼠标点击元素时,就会出现另一个窗口,类似于百度首页中右上角的“登录”这个按钮,当鼠标点击 登录时,就会出现登录窗口.大体的意思就是这样,直接上代码了,简单易懂. <!DOCTY ...
- 鼠标点击 input,显示瞬间的边框颜色,对之修改与隐藏
示例的是项目中的遇到的,要做成的效果是点击该图片按钮,达到切换图片的效果: HTML代码如下: <input class="dBox3Ulimg" type="im ...
随机推荐
- 解决Tomcat无法shutdown进程
转自:http://my.oschina.net/yongyi/blog/405198 问题分析 这个在windows下没有碰到过,因为此前跑Tomcat都是以服务而不是命令脚本的形式跑的,而且已经换 ...
- Java学习-041-颜色工具类(RGB,HEX)
在日常的网页开发中,经常需要进行颜色数值获取.转换,例如获取红色,获取蓝色,获取绿色,RGB转十六进制颜色,十六进制颜色转RGB等,因而在学习过程中,写了一个小工具类,仅供各位小主参考! 多不闲言,直 ...
- 史上最臭名昭著五大软件Bug
在现今数字年代,计算机bug不但困扰着每个程序员,更会无可避免影响我们的生活,小到每个人的衣食住行,大到国家经济,世界局势.随着我们的生活方式渐渐的数字化.互联网化,数字世界的找虫和杀虫就变得越来越重 ...
- Xcode命令行生成Bitcode静态库
近两三年一直在做静态库开发 1.在Xcode工程中创建静态库的Target,最初是手动Build出真机的.a文件,模拟器的.a文件,然后再用命令行合并 2.后来一些特殊的开发者,要求加入特殊的功能,或 ...
- 创建XMLHttpRequest对象方法
~~~ //创建XMLHttpRequest对象 function creatXmlHttpRequest() { var xmlHttp; try{ //非IE浏览器使用 xmlHttp = new ...
- linux----------纯净的centos7.0上安装lnmp环境的步骤
1.先看下screen -S lnmp 命令是否存在,不存在则安装.这个是个什么东东呢?百度一下( GNU Screen是一款由GNU计划开发的用于命令行终端切换的自由软件.用户可以通过该软件同时连接 ...
- gradle基础的build文件模板_jetty
group '组织名' version '版本号' /* 支持的插件 */ apply plugin: 'java' // 项目基础变成语言支持为java apply plugin: 'war' // ...
- 解决Eclipse启动Tomcat时报Error loading WebappClassLoader错误
最近新建了一个JSF项目(网上查到用Struts,Spring MVC也会如此),配置好以后用Eclipse启动Tomcat报了如下错误:严重: Error loading WebappClassLo ...
- 企业信息系统——CRM
客户关系管理系统(Customer Relationship Management)将客户看作是企业的一项重要资产,客户关怀是CRM的中心,其目的是与客户建立长期和有效的业务关系,在与客户的每个“接触 ...
- Openstack的keystone的user-role-list命令的使用
直接在shell模式下执行 [root@node-5 ~]# keystone user-role-list WARNING: Bypassing authentication using a tok ...