把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 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
Feb 27 Javascript
一波JavaScript日期判断脚本分享
Mar 06 Javascript
jQuery validate插件功能与用法详解
Dec 15 Javascript
Vue.js学习教程之列表渲染详解
May 17 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
Sep 07 Javascript
微信小程序公用参数与公用方法用法示例
Jan 09 Javascript
vue.js高德地图实现热点图代码实例
Apr 18 Javascript
JS document内容及样式操作完整示例
Jan 14 Javascript
在Echarts图中给坐标轴加一个标识线markLine
Jul 20 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
压力如何影响浓缩咖啡品质
2021/03/03 咖啡文化
一个PHP缓存类代码(附详细说明)
2011/06/09 PHP
php实现把数组按指定的个数分隔
2014/02/17 PHP
简介PHP的Yii框架中缓存的一些高级用法
2016/03/29 PHP
php批量修改表结构实例
2017/05/24 PHP
一文看懂PHP进程管理器php-fpm
2020/06/01 PHP
JavaScript 学习点滴记录
2009/04/24 Javascript
jQuery+css实现图片滚动效果(附源码)
2013/03/18 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
2013/04/26 Javascript
如何使用jquery控制CSS样式,并且取消Css样式(如背景色,有实例)
2013/07/09 Javascript
javascript同页面多次调用弹出层具体实例代码
2013/08/16 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
2015/05/16 Javascript
JavaScript截取指定长度字符串点击可以展开全部代码
2015/12/04 Javascript
jQuery焦点图插件SaySlide
2015/12/21 Javascript
JS显示日历和天气的方法
2016/03/01 Javascript
老生常谈遮罩层 滚动条的问题
2016/04/29 Javascript
Bootstrap被封装的弹层
2016/07/20 Javascript
Vue组件之Tooltip的示例代码
2017/10/18 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
Webpack devServer中的 proxy 实现跨域的解决
2018/06/15 Javascript
浅谈发布订阅模式与观察者模式
2019/04/09 Javascript
微信小程序 wx:for遍历循环使用实例解析
2019/09/09 Javascript
Element Tooltip 文字提示的使用示例
2020/07/26 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
python开发利器之ulipad的使用实践
2017/03/16 Python
Tensorflow 利用tf.contrib.learn建立输入函数的方法
2018/02/08 Python
浅谈python中真正关闭socket的方法
2018/12/18 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
Python类中self参数用法详解
2020/02/13 Python
python3 通过 pybind11 使用Eigen加速代码的步骤详解
2020/12/07 Python
函授毕业生的自我鉴定
2013/11/26 职场文书
三下乡活动方案
2014/01/31 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
大学生学年个人总结
2015/02/15 职场文书
CSS+HTML 实现顶部导航栏功能
2021/08/30 HTML / CSS
win11怎么用快捷键锁屏? windows11锁屏的几种方法
2021/11/21 数码科技