把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 相关文章推荐
jQuery 常见学习网站与参考书
Nov 09 Javascript
IE关闭时判断及AJAX注销案例学习
Feb 18 Javascript
JavaScript实现从数组中选出和等于固定值的n个数
Sep 03 Javascript
30分钟快速掌握Bootstrap框架
May 24 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
Jun 30 Javascript
Node.js的特点详解
Feb 03 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
Feb 17 Javascript
vue2笔记 — vue-router路由懒加载的实现
Mar 03 Javascript
详解用webpack2搭建angular2的项目
Jun 22 Javascript
vue单页应用加百度统计代码(亲测有效)
Jan 31 Javascript
vue 解决form表单提交但不跳转页面的问题
Oct 30 Javascript
Vue实现多页签组件
Jan 14 Vue.js
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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
常用的php ADODB使用方法集锦
2008/03/25 PHP
Yii2使用swiftmailer发送邮件的方法
2016/05/03 PHP
ThinkPHP5框架缓存查询操作分析
2018/05/30 PHP
对联广告js flash激活
2006/10/19 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
jQuery实现根据类型自动显示和隐藏表单
2015/03/18 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
每天一篇javascript学习小结(属性定义方法)
2015/11/19 Javascript
jquery.validate 自定义验证方法及validate相关参数
2016/01/18 Javascript
关于获取DIV内部内容报错的原因分析及解决办法
2016/01/29 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(二)
2016/02/16 Javascript
打造自己的jQuery插件入门教程
2016/09/23 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
jQuery插件fullPage.js实现全屏滚动效果
2016/12/02 Javascript
(模仿京东用户注册)用JQuery实现简单表单验证,初学者必看
2018/01/08 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
Vue封装Axios请求和拦截器的步骤
2020/09/16 Javascript
python 文件与目录操作
2008/12/24 Python
Python判断Abundant Number的方法
2015/06/15 Python
python 使用poster模块进行http方式的文件传输到服务器的方法
2019/01/15 Python
Pytorch: 自定义网络层实例
2020/01/07 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
迷你分体式空调:SoGoodToBuy
2018/08/07 全球购物
奥地利手表、香水、化妆品和珠宝购物网站:Brasty.at
2021/01/17 全球购物
Java面试笔试题大全
2016/11/23 面试题
怎么样写好简历中的自我评价
2013/10/25 职场文书
通信工程毕业生自荐信
2013/11/01 职场文书
竞选学生会演讲稿
2014/04/25 职场文书
历史学专业求职信
2014/06/19 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
运动会新闻报道稿
2015/07/22 职场文书
学雷锋感言
2015/08/03 职场文书