把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 相关文章推荐
javascript iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
JavaScript入门教程(8) Location地址对象
Jan 31 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
javascript圆盘抽奖程序实现原理和完整代码例子
Jun 03 Javascript
jQuery绑定事件不执行但alert后可以正常执行
Jun 03 Javascript
使用js获取地址栏参数的方法推荐(超级简单)
Jun 14 Javascript
jQuery实现的网格线绘制方法
Jun 20 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
深入理解js中的加载事件
Feb 08 Javascript
Vue 动态组件与 v-once 指令的实现
Feb 12 Javascript
Vue拖拽组件列表实现动态页面配置功能
Jun 17 Javascript
在Vue中创建可重用的 Transition的方法
Jun 02 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的面试题集
2006/11/19 PHP
php 禁止页面缓存输出
2009/01/07 PHP
php curl登陆qq后获取用户信息时证书错误
2015/02/03 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
php技巧小结【推荐】
2017/01/19 PHP
thinkphp3.2实现跨控制器调用其他模块的方法
2017/03/14 PHP
php实现微信发红包功能
2018/07/13 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
javascript 回调函数详解
2014/11/11 Javascript
JS实现可拖曳、可关闭的弹窗效果
2015/09/26 Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
2015/12/03 Javascript
js改变style样式和css样式的简单实例
2016/06/28 Javascript
学习vue.js条件渲染
2016/12/03 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
详解一个小实例理解js原型和继承
2019/04/24 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
详解Python程序与服务器连接的WSGI接口
2015/04/29 Python
python3 http提交json参数并获取返回值的方法
2018/12/19 Python
详解js文件通过python访问数据库方法
2019/03/03 Python
解决Jupyter无法导入已安装的 module问题
2020/04/17 Python
python爬虫请求头的使用
2020/12/01 Python
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
纽约21世纪百货官网:Century 21
2016/08/27 全球购物
马来西亚最好的婴儿商店:Motherhood
2017/09/14 全球购物
为什么在使用动态 SQL 语句时必须为低层数据库对象授予权限
2012/12/13 面试题
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
英文自荐信
2013/12/19 职场文书
水污染治理工程专业自荐信
2014/06/21 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
拥有这5个特征人,“命”都不会太差
2019/08/16 职场文书
在 Golang 中实现 Cache::remember 方法详解
2021/03/30 Python
Python语言规范之Pylint的详细用法
2021/06/24 Python