js实现placeholder效果
<form name="testForm" action="" method="">
<input type="text" name="hotGoods" class="text1">
</form>
<script type="text/javascript">
$(document).ready(function() {
$("input.text1").val('请输入您要搜索的内容').css('color','#ccc');
textFill($('input.text1'));
});
function textFill(input){
var originalvalue = input.val(); //请输入您要搜索的内容
// console.log(originalvalue);
input.focus( function(){
if( $.trim(input.val()) == originalvalue ){
input.css('color', '#333');
input.val('');
}
});
input.blur( function(){
if( $.trim(input.val()) == '' ){
input.css('color', '#ccc');
input.val(originalvalue);
}
});
}
</script>
js实现placeholder效果的更多相关文章
- React.js实现原生js拖拽效果及思考
一.起因&思路 不知不觉,已经好几天没写博客了...近来除了研究React,还做了公司官网... 一直想写一个原生js拖拽效果,又加上近来学react学得比较嗨.所以就用react来实现这个拖 ...
- 【jquery】基于 jquery 实现 ie 浏览器兼容 placeholder 效果
placeholder 是 html5 新增加的属性,主要提供一种提示(hint),用于描述输入域所期待的值.该提示会在输入字段为空时显示,并会在字段获得焦点时消失.placeholder 属性适用于 ...
- 浅谈实现placeholder效果的几种方案
placeholder是html5<input>的一个属性,它提供可描述输入字段预期值的提示信息(hint), 该提示会在输入字段为空时显示.高端浏览器支持此属性(ie10/11在获得焦点 ...
- IE下支持文本框和密码框placeholder效果的JQuery插件
基于jQuery实现的,主要用于IE下实现placeholder效果,可同时支持文本和密码输入框.placeholder是HTML5新增的一个属性,当input设置了该属性后,该值的内容将作为灰色提示 ...
- Jquery简单的placeholder效果
Jquery简单的placeholder效果 由于IE6-IE9不支持HTML5中的placeholder,所以自己依赖于Jquery简单的写了一个,供参考! 先看看效果吧!如下JSFiddle地址 ...
- JS添加标签效果
JS添加标签效果 在豆瓣网上添加自己的标签是一种常见的效果,今天也就做了一个简单的demo.由于时间的问题 我不多原理,大家可以试着操作几遍就能明白其中的原理了. JSFiddle的效果如下: 点击我 ...
- jQuery实现ie浏览器兼容placeholder效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 跨浏览器实现placeholder效果的jQuery插件
曾经遇到这样一个问题,处理IE8密码框placeholder属性兼容性.几经周折,这个方案是可以解决问题的. 1.jsp页面引入js插件 <script type="text/java ...
- placeholder 效果的实现,input提示字,获取焦点时消失
<!doctype html><html><head><meta charset="utf-8"><title>plac ...
随机推荐
- OpenStack网络的前世今生
声明: 本文转自OpenStack中国社区,原文链接:http://www.openstack.cn/p353.html,作者Joshua,转载请注明. 在OpenStack世界中,网络组件最初叫no ...
- MFC图形处理
关于MFC绘图功能入门 创建Dialog based MFC工程 打开Resource view 下的Dialog主界面 添加Picture control控件,为此控件添加CStatic的co ...
- 对javabean的内省操作
import java.beans.BeanInfo; import java.beans.IntrospectionException; import java.beans.Introspector ...
- 微信公众平台--网页授权获取用户基本信息(snsapi_base方式)
关于snsapi_base网页授权的说明 以snsapi_base为scope发起的网页授权,是用来获取进入页面的用户的openid的,并且是静默授权并自动跳转到回调页的.用户感知的就是直接进入了回调 ...
- .net 4中的pInvokeStackImbalance MDA默认是开启的
今天把我之前发的一个小工具FreeEverything(基于everything的一个简易磁盘清理工具)升级到了.net framework 4.5,并且去掉了对mvvmlight的依赖.结果在测试运 ...
- Scrum 学习笔记
Scrum 学习笔记 敏捷火了非常长一段时间了,可是一直没有机会实践,如今開始组队实践了,哈哈,先好好研习下规则~~ 什么是 scrum Scrum是一个敏捷开发框架,是一个增量的.迭代的开发过程.在 ...
- SpringMVC + Spring 3.2.14 + Hibernate 3.6.10 集成详解
注:此文档只说明简单的框架集成,各个框架的高级特性未涉及,刚刚接触框架的新人可能需要参考其他资料. PS:本次练习所用jar包都能在此下载到:http://pan.baidu.com/s/1sjmgd ...
- centos6.5 安装
导系统,进入rescue模式,在提示符下输入grub,进入grub提示符.(不管用什么方法,能进入grub就行)root(hd?,?) //前一个问号是你第几块硬盘,后一个是LINUX所在的第几个分区 ...
- 关于struts2中action请求会执行两次的问题
关于struts2中action请求会执行两次的问题 在struts2中发现,调用action中的方法,方法会被执行两次,后来发现调用的方法是get开头的,把它改为其他名称开头的后,就不会执行 ...
- Oracle中wm_concat()的使用方法
以下两种方式使用wm_concat()的使用方法是等效的. 方法一:使用窗口函数,wm_concat支持窗口函数 select distinct classKey,className, classOr ...