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 ...
随机推荐
- How to make apq8084
1.first of all ,you will meet many problem no excute permisson,pls do : chmod -R +x APQ8084/ 2. buil ...
- Erasing Edges - SGU 136(构造多边形)
题目大意:已知一个多边形上的每条边的中点,还原出来一个多边形. 分析:因为偶数是不固定的,所以可以为任意起点,奇数只有一个,可以所有中点加减算出来第一个点,然后就是简单的向量计算点的位置了...... ...
- JDK JRE JVM
使用java很久,但是一直不清楚JDK,JRE,JVM直接的关系,今天特地梳理一下. JDK:Java Development ToolKit(Java开发工具包),JDK是整个JAVA的核心,包括J ...
- css3图片滤镜
http://www.zhanxin.info/development/2012-12-19-css-filter.html
- IOS开发中ARC下的assign和weak区别
在ARC中的assign和weak可以说非常相像,导致有很多人误以为他们是一摸一样的,在任何时候都可以划等价,但事实却不是这样. 在群里,有人问,id类型的delegate属性到底是用assign还是 ...
- HDU ACM 1025 Constructing Roads In JGShining's Kingdom->二分求解LIS+O(NlogN)
#include<iostream> using namespace std; //BFS+优先队列(打印路径) #define N 500005 int c[N]; int dp[N]; ...
- android 26 设置项目有多个入口Activity。
第一个activity package com.sxt.day04_11; import android.os.Bundle; import android.app.Activity; import ...
- android 19 activity纵横屏切换的数据保存与恢复
Bundle类:竖屏的activity换到横屏的activity的时候,会把竖屏的activity杀掉横屏的activity创建,竖屏的activity会有一些计算结果,可以用数据存起来,存到内存里面 ...
- 亿图图示专家v7.7破解版
软件简介 亿图图示专家是一款综合矢量绘制软件,新颖小巧,功能强大,可以很方便的绘制各种专业的流程图.组织结构图.网络拓扑图.思维导图.商业图表.科学设计图等.轻轻松松绘制各种专业流程图,网络图,思维导 ...
- Qt 学习之路:二进制文件读写
在上一章中,我们介绍了有关QFile和QFileInfo两个类的使用.我们提到,QIODevice提供了read().readLine()等基本的操作.同时,Qt 还提供了更高一级的操作:用于二进制的 ...