把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 贪吃蛇实现代码
Nov 22 Javascript
firefox下jQuery UI Autocomplete 1.8.*中文输入修正方法
Sep 19 Javascript
jquery插件如何使用 jQuery操作Cookie插件使用介绍
Dec 15 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
AngularJS内建服务$location及其功能详解
Jul 01 Javascript
浅谈javascript中的加减时间
Jul 12 Javascript
在js里怎么实现Xcode里的callFuncN方法(详解)
Nov 05 Javascript
d3.js入门教程之数据绑定详解
Apr 28 Javascript
jQuery实现滚动效果
Nov 17 jQuery
详解使用vuex进行菜单管理
Dec 21 Javascript
angularJs中json数据转换与本地存储的实例
Oct 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
smarty简单入门实例
2014/11/28 PHP
thinkPHP+phpexcel实现excel报表输出功能示例
2017/06/06 PHP
TP3.2批量上传文件或图片 同名冲突问题的解决方法
2017/08/01 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
JS与框架页的操作代码
2010/01/17 Javascript
javascript中的正则表达式使用指南
2015/03/01 Javascript
Backbone.js框架中简单的View视图编写学习笔记
2016/02/14 Javascript
js实现前端图片上传即时预览功能
2017/08/02 Javascript
React-Native中props具体使用详解
2017/09/04 Javascript
五步轻松实现zTree的使用
2017/11/01 Javascript
谈谈JS中的!!
2017/12/07 Javascript
Vue请求JSON Server服务器数据的实现方法
2018/11/02 Javascript
微信小程序实现星星评价效果
2018/11/02 Javascript
js中null与空字符串&quot;&quot;的区别讲解
2019/01/17 Javascript
基于JS实现前端压缩上传图片的实例代码
2019/05/14 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue使用openlayers实现移动点动画
2020/09/24 Javascript
JavaScript 异步时序问题
2020/11/20 Javascript
vuex Module将 store 分割成模块的操作
2020/12/07 Vue.js
[00:23]DOTA2群星共贺开放测试 25日无码时代来袭
2013/09/23 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python实现的井字棋(Tic Tac Toe)游戏示例
2018/01/31 Python
python3+PyQt5重新实现自定义数据拖放处理
2018/04/19 Python
Selenium的使用详解
2018/10/19 Python
Python编程flask使用页面模版的方法
2018/12/28 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python属于跨平台语言码
2020/06/09 Python
python 如何区分return和yield
2020/09/22 Python
python 怎样进行内存管理
2020/11/10 Python
简述Html5 IphoneX 适配方法
2018/02/08 HTML / CSS
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
英国最大的割草机购买网站:Just Lawnmowers
2019/11/02 全球购物
护士先进个人总结
2015/02/13 职场文书
小型婚礼主持词
2015/06/30 职场文书