html5控制符置于底层,HTML5占位符在焦点上消失

Stefano J. Attardi写了一个不错的jQuery插件,只是这样。

它比罗伯特的更稳定,并且当场得到焦点时,还会变淡到更浅的灰色。

我修改他的插件读取占位符属性,而不是手动创建跨度。

This fiddle具有完整代码:

HTML

JS

// Original code by Stefano J. Attardi,MIT license

(function($) {

function toggleLabel() {

var input = $(this);

if (!input.parent().hasClass('placeholder')) {

var label = $('').addClass('placeholder');

input.wrap(label);

var span = $('');

span.text(input.attr('placeholder'))

input.removeAttr('placeholder');

span.insertBefore(input);

}

setTimeout(function() {

var def = input.attr('title');

if (!input.val() || (input.val() == def)) {

input.prev('span').css('visibility','');

if (def) {

var dummy = $('').text(def).css('visibility','hidden').appendTo('body');

input.prev('span').css('margin-left',dummy.width() + 3 + 'px');

dummy.remove();

}

} else {

input.prev('span').css('visibility','hidden');

}

},0);

};

function resetField() {

var def = $(this).attr('title');

if (!$(this).val() || ($(this).val() == def)) {

$(this).val(def);

$(this).prev('span').css('visibility','');

}

};

var fields = $('input,textarea');

fields.live('mouseup',toggleLabel); // needed for IE reset icon [X]

fields.live('keydown',toggleLabel);

fields.live('paste',toggleLabel);

fields.live('focusin',function() {

$(this).prev('span').css('color','#ccc');

});

fields.live('focusout','#999');

});

$(function() {

$('input[placeholder],textarea[placeholder]').each(

function() { toggleLabel.call(this); }

);

});

})(jQuery);

CSS

.placeholder {

background: white;

float: left;

clear: both;

}

.placeholder span {

position: absolute;

padding: 5px;

margin-left: 3px;

color: #999;

}

.placeholder input,.placeholder textarea {

position: relative;

margin: 0;

border-width: 1px;

padding: 6px;

background: transparent;

font: inherit;

}

/* Hack to remove Safari's extra padding. Remove if you don't care about pixel-perfection. */

@media screen and (-webkit-min-device-pixel-ratio:0) {

.placeholder input,.placeholder textarea { padding: 4px; }

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/467299.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

spring AspectJ的Execution表达式

Aspectj切入点语法定义 在使用spring框架配置AOP的时候,不管是通过XML配置文件还是注解的方式都需要定义pointcut"切入点" 例如定义切入点表达式 execution(* com.sample.service.impl..*.*(..)) execution()是最常用的切点函数,其语法如下所示…

计算机excl知识题,2019职称计算机考试Excel模拟题及答案(1.18)

【导语】2019年职称计算机考试备考正在进行中,为了方便考生及时有效的备考,那么,无忧考网为您精心整理了2019职称计算机考试Excel模拟题及答案(1.18),把握机会抓紧练习吧。如想获取更多职称计算机考试的模拟题及备考资料&#xff…

CPU中的程序是怎么运行起来的

总述最近一位朋友问我,开发的代码是怎么在芯片运行起来的,我就开始给他介绍代码的预编译、汇编、编译、链接然后到一般的文件属性,再到代码运行。但是大佬问了我一句,CPU到底是怎么执行到每一个逻辑的,就讲了哈CPU的架…

MspEmu W.I.P.

转载于:https://www.cnblogs.com/sesexxoo/archive/2006/07/29/6190717.html

Git-远程操作

远程分支:远程跟踪分支remote branch是对远程分支状态的引用,是不能移动的,它会根据远程分支变化以及网络通信自动移动。Git服务器包含了远程分支master,在My Computer中的remote branch就是远程跟踪分支,是对git服务器…

计算机语言学 自然语言处理程序,利用知网进行(计算机)自然语言处理

摘要:自然语言理解,特别是中文信息处理,一直是计算机界的难题.让计算机来理解和处理丰富的自然语言,极具挑战性.自然语言的计算机处理是一个多学科交叉研究领域.来自计算机科学,语言学,数学等不同学科的研究人员构成了目前这一领域的主要研究力量.自然语言处理就是研…

对于鸿蒙的一点见解

周五我在东莞出差,下班后看了开发者大会的视频回放,回到酒店,我跟邓总说,我们今天不要拍视频,也不要打王者了,你给我下鸿蒙的代码来看看,然后,那天晚上我们都没有上线王者&#xff0…

今天雨很大

早上就开始下雨了,一直到现在. 来公司发现翻译来了,一个星期前面试过的那个. 不知道做什么了,看来只能开始英文的B2B了.一直忙来忙去,突然早一天完成了工作,余下的一天不知道做什么. 昨天晚上在家里的机子练习时,多学会了一些东西,看来有必要多看一些别人的例子,…

Linux内存管理slub分配器

背景Kernel版本:4.14ARM64处理器,Contex-A53,双核使用工具:Source Insight 3.5, Visio1. 概述之前的文章分析的都是基于页面的内存分配,而小块内存的分配和管理是通过块分配器来实现的。目前内核中&#xf…

大学计算机科学不会编码,华中科技大学人员编号编码管理办法

第一条 为进一步推进学校管理的信息化、规范化和系统化,加强对我校教职工、学生等各类人员基本信息的统一管理,结合学校实际情况,制定本管理办法。第二条 凡在我校工作、学习的教职工、学生、短期聘用人员及其他人员,均拥有由10…

逆向知识第十讲,循环在汇编中的表现形式,以及代码还原

逆向知识第十讲,循环在汇编中的表现形式,以及代码还原 一丶do While在汇编中的表现形式 1.1高级代码: #include "stdafx.h"int main(int argc, char* argv[]) {int nSum 0;int i 0;do {nSum nSum i;} while (i <100);return 0; } 高级代码很简单,只是一个简单…

数据库基础系列之一:MySQL账户

1.mysql用户创建&#xff1a; shell> mysql --userroot mysql mysql> GRANT ALL PRIVILEGES ON *.* TO montylocalhost IDENTIFIED BY something WITH GRANT OPTION; mysql> GRANT ALL PRIVILEGES ON *.* TO monty"%" IDENTIFIED BY something WITH GRANT…

计量经济学实验报告计算机,计量经济学-实验报告.doc

.PAGE.资料.经济与政法学院计量经济学实验报告班级&#xff1a; 国贸1312姓名&#xff1a; 纪方方学号&#xff1a; 2013104208实验课程计量经济学实验名称OLS的估计和检验(受约束回归模型)实验目的和内容1&#xff0e;利用SPSS计算OLS估计量2&#xff0e;对模型估计结果进行检…

做技术知道了哪些事情代表自己成熟了?

如果技术圈是一个江湖&#xff0c;每个人初入江湖的时候都懵懵懂懂的&#xff0c;从懵懂到老练&#xff0c;从老练到老油条&#xff0c;这个是一个过程&#xff0c;过程中总是有一些比较有用的观点&#xff0c;这些观点&#xff0c;就表示你从小白上升到老白的过渡。这些观点&a…

数据结构复习笔记(2)

1&#xff0c; 若入栈的元素为n,则可得到的输出序列数量为 (2n)!/(n1)(n!)(n!)。2&#xff0c; 用两个长度相同的栈S1,S2构造一个队列。在S1中进行入队操作&#xff0c;S2中进行出队操作 &#xff0c;判断队列空的条件是&#xff0c;S1和S2同时为空&#xff0c;判断队列满的条…

html兼容webki,评IE10对HTML5的完美支持

该楼层疑似违规已被系统折叠 隐藏此楼查看此楼近期Windows 8的消息充斥着整个网络。微软将IE10集成在系统中&#xff0c;并且宣称IE10会很好的支持HTML5。本文是对IE10支持HTML5的研究报告。预览&#xff1a;HTML5初探 在过去的几年里我们做了一系列测试来评估主要的移动平台对…

用于MCU,基于FreeRTOS的micro(轻量级)ROS

编辑整理&#xff1a;strongerHuang作者&#xff1a;Francesca Finocchiaro关注我的读者中应该有部分是做ROS相关的工作&#xff0c;今天就来分享一个基于FreeRTOS的micro&#xff08;微型&#xff09;ROS。一、关于ROSROS&#xff1a;Robot Operating System,&#xff0c;即机…

惜缘-致家乡的一位女孩[原创]

命里有时终须有,命里无时莫强求.这说的应该就是缘分吧.曾经有人说,每个人来到世界上,都只有一半.然后,每个人会花一生的时间寻找另一半.无论你有意识还是无意识地去寻找你的恋人,你是不是都希望这个假设是成立的呢?至少,你知道有那样一个人在世界的那一个地方等你回来,在你找他…

【干货】同步与互斥的失败例子

韦东山老师最新录制的驱动大全之<<同步与互斥>>收费视频已经在淘宝上架销售 &#xff0c;一共7节&#xff0c;良心价29元&#xff0c;同时已经同步到CSDN , 51CTO , 电子发烧友&#xff0c;腾讯课堂等平台。本文是其中一节《同步与互斥的失败例子》视频配套文档&am…

微型计算机计算机钢琴,微型计算机原理及接口技术钢琴课程设计.doc

高频电子线路课程设计题目&#xff1a; 高 频 功 率 放 大 器 .班级&#xff1a; 08级通信1班 .姓名&#xff1a; 马宗祥 .学号&#xff1a; P081513166 .成绩&#xff1a; .组内分工成员及分工&#xff1a;程冲冲&#xff1a;低频放大马云、吴欣萌&#xff1a;振荡及调制洪学军…