把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 布尔型分析
Dec 22 Javascript
js读取本地excel文档数据的代码
Nov 11 Javascript
javascript的内存管理详解
Aug 07 Javascript
深入解析JavaScript的闭包机制
Oct 20 Javascript
设置点击文本框或图片弹出日历控件的实现代码
May 12 Javascript
JavaScript获取当前时间向前推三个月的方法示例
Feb 04 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
JavaScript读写二进制数据的方法详解
Sep 09 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
Feb 02 Javascript
vue 防止页面加载时看到花括号的解决操作
Nov 09 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP操作mysql函数详解,mysql和php交互函数
2011/05/19 PHP
php学习之 循环结构实现代码
2011/06/09 PHP
PHP生成树的方法
2015/07/28 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
javascript下判断一个对象是否具有指定名称的属性的的代码
2010/01/11 Javascript
客户端js性能优化小技巧整理
2013/11/05 Javascript
javascript解析json实例详解
2014/11/05 Javascript
JavaScript中实现单体模式分享
2015/01/29 Javascript
jQuery检测输入的字符串包含的中英文的数量
2015/04/17 Javascript
JS实现从连接中获取youtube的key实例
2015/07/02 Javascript
解决jQuery uploadify在非IE核心浏览器下无法上传
2015/08/05 Javascript
AngularJs Injecting Services Into Controllers详解
2016/09/02 Javascript
bootstrap基础知识学习笔记
2016/11/02 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
Vue学习笔记进阶篇之单元素过度
2017/07/19 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
微信小程序scroll-x失效的完美解决方法
2018/07/18 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
python pycurl验证basic和digest认证的方法
2018/05/02 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
Jupyter Notebook添加代码自动补全功能的实现
2021/01/07 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
CSS3实现各种图形的示例代码
2016/10/19 HTML / CSS
HTML5中FileReader接口使用方法实例详解
2017/08/26 HTML / CSS
用canvas做一个DVD待机动画的实现代码
2019/04/12 HTML / CSS
法律专业自我鉴定
2013/10/03 职场文书
老总助理工作岗位职责
2014/02/06 职场文书
《金子》教学反思
2014/04/13 职场文书
解除劳动合同协议书范本
2014/04/14 职场文书
工会趣味活动方案
2014/08/18 职场文书
带刀到教室的检讨书
2014/10/04 职场文书
一次性工伤赔偿协议书范本
2014/11/25 职场文书
春秋淹城导游词
2015/02/11 职场文书
Win11 Dev 预览版25174.1000发布 (附更新修复内容汇总)
2022/08/05 数码科技