把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 相关文章推荐
js玩一玩WSH吧
Feb 23 Javascript
jQuery UI 应用不同Theme的办法
Sep 12 Javascript
理解Javascript_14_函数形式参数与arguments
Oct 20 Javascript
浅析JQuery获取和设置Select选项的常用方法总结
Jul 04 Javascript
js正则表达exec与match的区别说明
Jan 29 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
深入学习JavaScript的AngularJS框架中指令的使用方法
Mar 05 Javascript
JS正则替换掉小括号及内容的方法
Nov 29 Javascript
Bootstrap基本样式学习笔记之表格(2)
Dec 07 Javascript
vue-loader教程介绍
Jun 14 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 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下检测字符串是否是utf8编码的代码
2008/06/28 PHP
php类常量的使用详解
2013/06/08 PHP
使用php显示搜索引擎来的关键词
2014/02/13 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
input 和 textarea 输入框最大文字限制的jquery插件
2011/10/27 Javascript
event.currentTarget与event.target的区别介绍
2012/12/31 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
JavaScript实现点击按钮字体放大、缩小
2016/02/29 Javascript
jQuery通用的全局遍历方法$.each()用法实例
2016/07/04 Javascript
AngularJS入门之动画
2016/07/27 Javascript
javascript prototype原型详解(比较基础)
2016/12/26 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
js遍历获取表格内数据的方法(必看)
2017/04/06 Javascript
微信小程序 动态传参实例详解
2017/04/27 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
nodejs超出最大的调用栈错误问题
2017/12/27 NodeJs
简单通过settimeout看javascript的运行机制
2019/05/10 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
2019/09/04 Javascript
openlayers4实现点动态扩散
2020/08/17 Javascript
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
Python GUI编程完整示例
2019/04/04 Python
Django处理多用户类型的方法介绍
2019/05/18 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
高职助产应届生自荐信
2013/09/24 职场文书
工业学校毕业生自荐书
2014/01/03 职场文书
人民调解员先进事迹材料
2014/05/08 职场文书
2014优秀党员事迹材料
2014/08/14 职场文书
小学班级特色活动方案
2014/08/31 职场文书
教师师德考核自我评价
2014/09/13 职场文书
校园广播稿精选
2014/10/01 职场文书
初中政治教师教学反思
2016/02/23 职场文书
导游词之上海豫园
2019/10/24 职场文书
Html5新增了哪些功能
2021/04/16 HTML / CSS
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python