把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 相关文章推荐
js小技巧--自动隐藏红叉叉
Aug 13 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
Jun 20 Javascript
javascript下拉框选项单击事件的例子分享
Mar 04 Javascript
javascript与Python快速排序实例对比
Aug 10 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
wap手机端解决返回上一页的js实例
Dec 08 Javascript
JavaScript奇技淫巧44招【实用】
Dec 11 Javascript
jQuery中的siblings()是什么意思(推荐)
Dec 29 Javascript
详解javascript 正则表达式之分组与前瞻匹配
May 30 Javascript
使用vuex解决刷新页面state数据消失的问题记录
May 08 Javascript
vue穿梭框实现上下移动
Jan 29 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
输入值/表单提交参数过滤有效防止sql注入的方法
2013/12/25 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
Js切换功能的简单方法
2010/11/23 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jQuery实现新消息闪烁标题提示的方法
2015/03/11 Javascript
关于延迟加载JavaScript
2015/05/05 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
Javascript数组循环遍历之forEach详解
2016/11/07 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
2016/12/08 Javascript
利用Node.js+Koa框架实现前后端交互的方法
2017/02/27 Javascript
微信小程序之onLaunch与onload异步问题详解
2019/03/28 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
javascript实现贪吃蛇游戏(娱乐版)
2020/08/17 Javascript
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
Python应用库大全总结
2018/05/30 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
详解python的四种内置数据结构
2019/03/19 Python
Dlib+OpenCV深度学习人脸识别的方法示例
2019/05/14 Python
Python实现蒙特卡洛算法小实验过程详解
2019/07/12 Python
python3常用的数据清洗方法(小结)
2019/10/31 Python
Python使用matplotlib绘制Logistic曲线操作示例
2019/11/28 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
德国高性价比网上药店:medpex
2017/07/09 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
高中考试作弊检讨书
2014/01/14 职场文书
领导干部培训感言
2014/01/23 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
爱我中华教学反思
2014/04/28 职场文书
销售顾问工作计划书
2014/09/15 职场文书
教师党员学习群众路线心得体会
2014/11/04 职场文书
房地产销售员岗位职责
2015/04/11 职场文书
2015年秋季灭鼠工作总结
2015/07/27 职场文书
MySQL中存储时间的最佳实践指南
2021/07/01 MySQL
JS数组去重详情
2021/11/07 Javascript
Nginx工作模式及代理配置的使用细节
2022/03/21 Servers