把input初始值不写value的具体实现方法


Posted in Javascript onJuly 04, 2013

1.用<span>标签写,定位在input上,让它单击和input获焦上都消失。

比如制作一个最常见的,input初始值,一般以前,我都只是写在input的value里。但是某天开发说,这不行,会传值七七八八%……@剩下的只能意会不能言传了。所以,要把初始值单独写出来,于是我比较傻逼,就用<span>标签写,定位在input上,让它单击和input获焦上都消失。

一定要牢牢记住的单词。网上那堆,如果你看都不看就直接制作过来用的话,你就特么的是全天下最特么傻逼的人了!!我现在打字双手还在颤抖,实在无法原谅自己,那么微小的错误。对于一个懒人,又笨人。还是把正确的单词放在自己能想得到的地方吧。

previousSibling 查找前一节点。

nextSibling 查找下一节点。

html

<label class="password"> 
<span class="passText" onClick="CHECKON.hide(this,oldpwd)" id="oldPass">原密码</span> 
<input type="password" name="oldpwd" id="oldpwd" onfocus="CHECKON.showHelpInfo(this);" class="text" autocomplete="off" /> 
</label> 
css .password{ position:relative; } 
.passText{ position:absolute; left:5px; top:0px; color:#a9a9a9; font-size:14px;}

js,注意那个长长长长长长长的单词!!!!!再拼错就剁手。

var CHECKON={ 
showHelpInfo:function(idTa){ 
var pve=(idTa.previousSibling.nodeType==1)?idTa.previousSibling:idTa.previousSibling.previousSibling; 
pve.style.display='none' 
}, 
hide:function(classN,id2){ 
var idBox=document.getElementById(id2); 
classN.style.display='none'; 
idBox.focus(); 
} 
}

2.用背景图片的方式,给input添加背景图片,当获焦时,让图片消失。

3.html5里有个最新属性,placeholder属性,它会自觉出现在input里,并以灰色呈现。但是只在input输入时才会消失。 But html5,你懂的,ie8啥的不支持。

以上还有一个问题,就是浏览器会把之前的已经输入的记录记着,当再次打开登录页面时,帐号密码就出自觉出现。是当然是好事。but,对于之前设置的span标签定位的方法来说,就会出现 重影。

如果用背景图,是基本能解决,但,ie7不行。

在head头中加上了如下代码,即清除掉之前缓存登录记录:

<meta http-equiv= "Pragma" content= "no-cache" /> 
<meta http-equiv= "Cache-Control" content= "no-cache" /> 
<meta http-equiv= "Expires" content= "0" />
Javascript 相关文章推荐
ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList
Feb 03 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
javascript特殊用法示例介绍
Nov 29 Javascript
node.js入门教程
Jun 01 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
Css3制作变形与动画效果
Jul 24 Javascript
关于Javascript中defer和async的区别总结
Sep 20 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
基于VUE.JS的移动端框架Mint UI的使用
Oct 11 Javascript
JS简单数组排序操作示例【sort方法】
May 17 Javascript
layui之table checkbox初始化时选中对应选项的方法
Sep 02 Javascript
Web应用开发TypeScript使用详解
May 25 Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 #Javascript
简单实用jquery版三级联动select示例
Jul 04 #Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 #Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 #Javascript
Jquery多选框互相内容交换的实例代码
Jul 04 #Javascript
js局部刷新页面时间具体实现
Jul 04 #Javascript
Jquery倒数计时按钮setTimeout的实例代码
Jul 04 #Javascript
You might like
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php mysql procedure实现获取多个结果集的方法【基于thinkPHP】
2016/11/09 PHP
PHP单例模式简单用法示例
2017/06/23 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
PHP实现的无限分类类库定义与用法示例【基于thinkPHP】
2018/08/06 PHP
PHP数据源架构模式之表入口模式实例分析
2020/01/23 PHP
jQuery 表单验证扩展(四)
2010/10/20 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
javascript中基本类型和引用类型的区别分析
2015/05/12 Javascript
JQuery中上下文选择器实现方法
2015/05/18 Javascript
有趣的bootstrap走动进度条
2016/12/01 Javascript
BootStrap CSS全局样式和表格样式源码解析
2017/01/20 Javascript
关于AngularJs数据的本地存储详解
2017/01/20 Javascript
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
echarts多条折线图动态分层的实现方法
2019/05/24 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
python将html转成PDF的实现代码(包含中文)
2013/03/04 Python
使用python在校内发人人网状态(人人网看状态)
2014/02/19 Python
Python多线程编程(五):死锁的形成
2015/04/05 Python
python实现文件路径和url相互转换的方法
2015/07/06 Python
解决出现Incorrect integer value: '' for column 'id' at row 1的问题
2017/10/29 Python
python实现批量按比例缩放图片效果
2018/03/30 Python
TensorFlow实现随机训练和批量训练的方法
2018/04/28 Python
Python之csv文件从MySQL数据库导入导出的方法
2018/06/21 Python
python简单区块链模拟详解
2019/07/03 Python
tensorflow使用CNN分析mnist手写体数字数据集
2020/06/17 Python
python实现企业微信定时发送文本消息的实例代码
2020/11/25 Python
实例教程 一款纯css3实现的数字统计游戏
2014/11/10 HTML / CSS
大学生学习2014年全国两会心得体会
2014/03/12 职场文书
公司请假条范文
2014/04/11 职场文书
大学生村官演讲稿
2014/04/25 职场文书
公司节能减排方案
2014/05/16 职场文书
2017年大学生寒假社会实践活动总结
2016/04/06 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
Python 数据科学 Matplotlib图库详解
2021/07/07 Python