脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → input初始值不写value

把input初始值不写value的具体实现方法

 更新时间：2013年07月04日 17:27:35   投稿：whsnow  
比如制作一个最常见的,input初始值,一般以前,我都只是写在input的value里,要把初始值单独写出来,就用<span>标签写,定位在input上,让它单击和input获焦上都消失

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 通过模式匹配实现重载

    昨天rank同学向我提出一个问题，在实际应用中有些接口需要提供类似于函数重载的功能，以方便开发者组织代码逻辑，简化使用者调用。
    2010-08-08
  • addeventlistener监听scroll跟touch(实例讲解)

    addeventlistener监听scroll跟touch(实例讲解)

    下面小编就为大家带来一篇addeventlistener监听scroll跟touch(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 原生JS实现文件上传

    原生JS实现文件上传

    这篇文章主要为大家详细介绍了原生JS实现文件上传，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 前端发布缓存导致白屏几种解决方案总结

    前端发布缓存导致白屏几种解决方案总结

    这篇文章主要介绍了前端发布缓存导致白屏的几种解决方案,文章还介绍了Jenkins发布流程优化和使用版本号方案,以减少发布缓存问题,每种方案都有其优缺点,需要根据实际情况进行选择和调整,需要的朋友可以参考下
    2025-04-04
  • 手动实现js短信验证码输入框

    手动实现js短信验证码输入框

    本文记录一下自己手动实现的一个前端常见的短信验证码输入组件，从需求到实现逐步优化的过程。具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2021-06-06
  • JavaScript中实现在光标位置插入内容的几种方法

    JavaScript中实现在光标位置插入内容的几种方法

    本文主要介绍了在网页开发中,如何使用JavaScript在文本输入框或富文本编辑器的光标位置插入内容的实践,包括获取光标位置的方法,创建文本节点,操作Selection对象,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-10-10
  • JS获取下拉列表所选中的TEXT和Value的实现代码

    JS获取下拉列表所选中的TEXT和Value的实现代码

    本篇文章主要是对JS获取下拉列表所选中的TEXT和Value的实现代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
    2014-01-01
  • JavaScript判断输入是否为整数的正则表达式

    JavaScript判断输入是否为整数的正则表达式

    这篇文章主要介绍了JavaScript判断输入是否为整数的正则表达式,用于验证不同类型的数据,包括数字、字符、电子邮件、网址、身份证号、手机号码等,每个模式都提供了详细的正则表达式和匹配说明,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2025-04-04
  • js 匿名调用实现代码

    js 匿名调用实现代码

    js中定义函数的方式有多种，函数直接量就是其中一种。如var fun = function(){},这里function如果不赋值给fun那么它就是一个匿名函数。
    2009-06-06
  • 小程序如何使用分包加载的实现方法

    小程序如何使用分包加载的实现方法

    这篇文章主要介绍了小程序如何使用分包加载的实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05

最新评论