鼠标点击输入框文字消失 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 ...
随机推荐
- DOM9大节点
ELEMENT_NODE 1 元素节点 常用 ATTRIBUTE_NODE 2 属性节点 常用 TEXT_NODE 3 文本节点 常用 CDATA_SECTION_NODE 4 CDATA区段 E ...
- SSD果然劲爆!
前两周入手了一块浦科特128G盘,不说多了,有图为证 以前把机械盘放在主硬盘位的时候,鲁大师显示是SATA II接口,现在把SSD放在主硬盘位,显示居然是SATA III接口了,看上面测试,确实是II ...
- Git merge 与 git rebase的区别
Git merge的用法: git merge Dev // Dev表示某分支,表示在当前分支合并Dev分支 git merge -m "Merge from Dev" Dev ...
- java 删除目录、 文件
示例 import java.io.File; public class fileTest { public static void main(String []args){ String strVe ...
- C#窗体 自定义控件
1 using System; 2 using System.Collections.Generic; 3 using System.ComponentModel; 4 using System.Dr ...
- Java语言的特点
一. 面向对象:其实是现实世界模型的自然延伸.现实世界中任何实体都可以看作是对象.对象之间通过消息相互作用.另外,现实世界中任何实体都可归属于某类事物,任何对象都是某一类事物的实例.如果说传统的过程式 ...
- Windows下pry安装和配置
Windows下pry安装和配置 pry是一个增强型的交互式命令行工具,比irb强大. 有自动完成功能,自动缩进,有颜色.有更强大的调试功能. pry 安装很简单. 在终端输入: gem instal ...
- 使用Redis分布式队列
1.这是处理异常的类 public class MyExceptionAttribute:HandleErrorAttribute { //public static Queue<Excepti ...
- CSS3:transform translate transition 这些都是什么?
transform:一个属性名称,即CSS3 2D转换 属性. translate:一个属性函数,用法是translate(dx,dy) div { transform: translate(50px ...
- web工程目录结构
/WEB-INF/web.xml Web应用程序配置文件,描述了 servlet 和其他的应用组件配置及命名规则. /WEB-INF/classes/包含了站点所有用的 class 文件,包括 ser ...