把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 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
jquery 页面全选框实践代码
Apr 02 Javascript
Webkit的跨域安全问题说明
Sep 13 Javascript
裁剪字符串trim()自定义改进版
Apr 10 Javascript
去掉gridPanel表头全选框的小例子
Jul 18 Javascript
Json序列化和反序列化方法解析
Dec 19 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
Sep 17 Javascript
自定义vue全局组件use使用、vuex的使用详解
Jun 14 Javascript
无限循环轮播图之运动框架(原生JS实现)
Oct 01 Javascript
实例详解带参数的 npm script
May 28 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
Vue动态加载图片在跨域时无法显示的问题及解决方法
Mar 10 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
?繁体转换的class
2006/10/09 PHP
WordPress中转义HTML与过滤链接的相关PHP函数使用解析
2015/12/22 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
PHP中的self关键字详解
2019/06/23 PHP
JavaScript mapreduce工作原理简析
2012/11/25 Javascript
JavaScript根据数据生成百分比图和柱状图的实例代码
2013/07/14 Javascript
搭建pomelo 开发环境
2014/06/24 Javascript
浅谈Javascript中深复制
2014/12/01 Javascript
jQuery组件easyui基本布局实现代码
2016/08/25 Javascript
jQuery Validate验证框架详解(推荐)
2016/12/17 Javascript
基于jQuery制作小图标上下滑动特效
2017/01/18 Javascript
微信小程序 页面跳转及数据传递详解
2017/03/14 Javascript
微信小程序实现缓存根据不同的id来进行设置和读取缓存
2017/06/12 Javascript
jQuery移动端跑马灯抽奖特效升级版(抽奖概率固定)实现方法
2019/01/18 jQuery
JS实现图片切换特效
2019/12/23 Javascript
vue中实现动态生成二维码的方法
2020/02/21 Javascript
原生JS实现留言板
2020/03/26 Javascript
js实现tab栏切换效果
2020/08/02 Javascript
vue导入.md文件的步骤(markdown转HTML)
2020/12/31 Vue.js
Python中MySQLdb和torndb模块对MySQL的断连问题处理
2015/11/09 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python基于socket模块实现UDP通信功能示例
2018/04/10 Python
virtualenv 指定 python 解释器的版本方法
2018/10/25 Python
详解Python 正则表达式模块
2018/11/05 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
使用python绘制cdf的多种实现方法
2020/02/25 Python
Pytorch mask-rcnn 实现细节分享
2020/06/24 Python
Matplotlib中rcParams使用方法
2021/01/05 Python
便携式太阳能系统的创新者:GOAL ZERO
2018/02/04 全球购物
颁奖典礼主持词
2014/03/25 职场文书
本科生导师推荐信范文
2014/05/18 职场文书
工作批评与自我批评范文
2014/10/16 职场文书
商业门面租房协议书
2014/11/25 职场文书
小学教师先进事迹材料
2014/12/15 职场文书
新闻报道稿范文
2015/07/23 职场文书
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python