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

时间:2022-12-14 19:17:39

鼠标点击输入框文字消失 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&comma; 文本框获得焦点后&comma; 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. &lbrack;转&rsqb;OAuth 2&period;0 - Authorization Code授权方式详解

    本文转自:http://www.cnblogs.com/highend/archive/2012/07/06/oautn2_authorization_code.html I:OAuth 2.0 开发 ...

  2. iOS之使用模拟器报错:resource fork&comma; Finder information&comma; or similar detritus not allowed

    很奇怪的问题,使用真机测试没有问题.但使用模拟器测试的时候就会报这样的错误,错误类型为:Code Sign Error 错误提示是这样:resource fork, Finder informatio ...

  3. head&comma;tail

    测试文件headtail 1 L 2 L 3 L 4 L 5 L 6 L 7 L 8 L 9 L 10 L 11 L 12 L 13 L 14 L 15 L 16 L 17 L 18 L 19 L h ...

  4. &period;NET面试题解析&lpar;07&rpar;-多线程编程与线程同步 &lpar;转&rpar;

    http://www.cnblogs.com/anding/p/5301754.html 系列文章目录地址: .NET面试题解析(00)-开篇来谈谈面试 & 系列文章索引 关于线程的知识点其实 ...

  5. SpringMVC注解&commat;initbinder解决类型转换问题

    在使用SpringMVC的时候,经常会遇到表单中的日期字符串和JavaBean的Date类型的转换,而SpringMVC默认不支持这个格式的转换,所以需要手动配置,自定义数据的绑定才能解决这个问题.在 ...

  6. MITMF使用import error

    安装问题: 1.ubuntu 14.04.安装使用capstone时候,提示出现import error:ERROR: fail to load the dynamic library. 解决方法:将 ...

  7. 将rcc&period;exe添加到系统Path

    rcc不是内部或外部命令搜索下rcc.exe二进制文件的位置,然后将该路径添加到path环境变量中. 在cmd中输入path,显示当前的环境变量. 然后path = %path%;C:\Qt\4.8. ...

  8. 新手必须掌握的Linux命令

    一.命令组成 一个完整的命令通常由  命令名称 [命令参数] [命令对象]  组成. 注意:命令名称.命令参数.命令对象之间用空格键隔开. 二.系统工作命令 查看主机名称 echo $HOSTNAME ...

  9. CTF---Web入门第七题 猫抓老鼠

    猫抓老鼠分值:10 来源: 实验吧 难度:难 参与人数:8697人 Get Flag:3740人 答题人数:3944人 解题通过率:95% catch!catch!catch!嘿嘿,不多说了,再说剧透 ...

  10. 浅析JavaScript之数组

    一  概述 JavaScript数组同后端语言一样,具有它自己的数据结构,归根结底,这种数据结构,本质就是一种集合. 在后端语言中(如java,.net等),数组是这样定义的:数组是用来存储相同数据类 ...