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 ...
随机推荐
- udev:renamed network interface eth0 to eth1
删除/etc/udev/rules.d/70-persistent-net.rules这个文件,重启
- h2 database
java -cp h2-1.4.187.jar org.h2.tools.Shell -url jdbc:h2:file:~/.h2/hzhssh -user sa 如果有个数据库的文件名为:hzhs ...
- objective-c保护属性
#import <Foundation/Foundation.h> @interface ClassVirable : NSObject{ NSInteger year;//保护树形 } ...
- 1388 - Graveyard(数论)
题目链接:1388 - Graveyard 题目大意:在一个周长为10000的圆形水池旁有n个等距离的雕塑,现在要再添加m个雕塑,为了使得n + m个雕塑等距离,需要移动一些雕塑,问如何使得移动的总位 ...
- 无法将类型“System.Collections.Generic.IEnumerable<EmailSystem.Model.TemplateInfo>”隐式转换为“System.Collections.Generic.List<EmailSystem.Model.TemplateInf
List<Model.Template> templateList = templateBLL.RecommendTemplateByOrder(modelEbay); List<M ...
- jstree 节点拖拽保存数据库
需要jstree具有拖拽功能需要在加载jstree时添加dnd插件,具体看代码: $('**').jstree({ //plugins-各种jstree的插件引入,展示树的多样性 'plugins' ...
- Android关于ListView中item与控件抢夺焦点的那些事
在开发中,listview可以说是我们使用最频繁的控件之一了,但是关于listview的各种问题也是很多.当我们使用自定义布局的Listview的时候,如果在item的布局文件里面存在Button或者 ...
- valgrind 打印程序调用树+进行多线程性能分析
使用valgrind的callgrind工具进行多线程性能分析 yum install valgrind / wget http://valgrind.org/downloads/valgrind-3 ...
- block没那么难(一):block的实现
本系列博文总结自<Pro Multithreading and Memory Management for iOS and OS X with ARC> block 顾名思义就是代码块,将 ...
- php 编译安装的一个 configure 配置
yum -y install libmcrypt-devel mhash-devel libxslt-devel libjpeg libjpeg-devel libpng libpng-devel f ...