把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 相关文章推荐
30个最好的jQuery 灯箱插件分享
Apr 25 Javascript
jQuery获得内容和属性示例代码
Jan 16 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
Window.Open如何在同一个标签页打开
Jun 20 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
详细分析使用AngularJS编程中提交表单的方式
Jun 19 Javascript
深入理解angular2启动项目步骤
Jul 15 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
vue router动态路由下让每个子路由都是独立组件的解决方案
Apr 24 Javascript
javascript中一些奇葩的日期换算方法总结
Nov 14 Javascript
ES6中的迭代器、Generator函数及Generator函数的异步操作方法
May 12 Javascript
js实现石头剪刀布游戏
Oct 11 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中读取和写入WORD文档的代码
2008/04/09 PHP
在CentOS系统上从零开始搭建WordPress博客的全流程记录
2016/04/21 PHP
Yii使用smsto短信接口的函数demo示例
2016/07/13 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
javascript 支持ie和firefox杰奇翻页函数
2008/07/22 Javascript
javascript 清空form表单中某种元素的值
2009/12/26 Javascript
js事件(Event)知识整理
2012/10/11 Javascript
$.extend 的一个小问题
2015/06/18 Javascript
jquery对dom节点的操作【推荐】
2016/04/15 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
js实现购物车功能
2018/06/12 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
Node.js 路由的实现方法
2019/06/05 Javascript
在vue中使用jsx语法的使用方法
2019/09/30 Javascript
使用JS来动态操作css的几种方法
2019/12/18 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
用Python写一个无界面的2048小游戏
2016/05/24 Python
python中函数传参详解
2016/07/03 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
PyQT实现多窗口切换
2018/04/20 Python
解决Python 中英文混输格式对齐的问题
2018/07/16 Python
Python装饰器简单用法实例小结
2018/12/03 Python
Django 框架模型操作入门教程
2019/11/05 Python
对Pytorch中Tensor的各种池化操作解析
2020/01/03 Python
python3判断IP地址的方法
2021/03/04 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
Amcal中文官网:澳洲综合性连锁药房
2019/03/28 全球购物
法国包包和行李箱销售网站:Bagage24.fr
2020/03/24 全球购物
项目经理的岗位职责
2013/11/23 职场文书
毕业自我鉴定书
2014/03/24 职场文书
群众路线剖析材料(四风)
2014/11/05 职场文书
歌剧魅影观后感
2015/06/05 职场文书
优秀学生干部主要事迹材料
2015/11/04 职场文书
《自然之道》读后感3篇
2019/12/17 职场文书
html粘性页脚的具体使用
2022/01/18 HTML / CSS