`

兼容IE8 的清空input标签

阅读更多

这个问题还是有BUG 正在继续研究;我现在总结里几点清空缓存的方法

/* 清空页面的缓存信息 */
function clearLoginInput() {
document.getElementById("cellPhoneL").value = "";
document.getElementById("passWord").value = "";
document.getElementById("login_img_code").value = "";
document.getElementById("registerpassword").value = "";

if( !('placeholder' in document.createElement('input')) ){ 
  
    $('.ppl').each(function(){  
      var that = $(this),  
      text= that.attr('placeholder');  
      if(that.val()===""){  
        that.val(text).addClass('placeholder');  
      }  
      that.focus(function(){  
        if(that.val()===text){  
          that.val("").removeClass('placeholder');  
        }  
      })  
      .blur(function(){  
        if(that.val()===""){  
          that.val(text).addClass('placeholder');  
        }  
      })  
      .closest('form').submit(function(){  
        if(that.val() === text){  
          that.val('');  
        }  
      });
      if(that.val()==="密碼"){
      placeHolder(document.getElementById("passWord"),false);
      document.getElementById("passWord").attachEvent('onblur', loginPasswordVali);
      }
    });  
  }

}
<!--登陆star-->
<div class="login-zf" style="display: none;" id="loginSystem">
<span class="login-close1 login-closeBg" onclick="closeLogin()"></span>
<h3><fmt:message key="headtop.login"/></h3>
<div class="login-posit" id="login_div_cellPhoneL">
<input class="p-number ppl" type="text" placeholder="<fmt:message key="headtop.mobileuser"/>"
id="cellPhoneL" onblur="loginCellPhoneLValiIsBlank()" maxlength="50">
<p class="login-tip">
<span class="orange orange2" id="mobilecolde"></span> <i
class="login-close4 login-closeBg ml5" id="login_i_cellPhoneL"></i>
</p>
</div>
<div class="login-posit" id="login_div_passWord">
<input class="p-number ppl" type="password" placeholder="<fmt:message key="headtop.password"/>"
id="passWord" onblur="loginPasswordVali()" maxlength="16">
<p class="login-tip">
<span class="orange orange2" id="tishi"></span> <i class="login-close5 login-closeBg ml5"
id="login_i_passWord"></i>
</p>
</div>
<div class="login-positHou  clearfix">      
        <input class="m-number fl ppl" type="text" placeholder="<fmt:message key="headtop.validatecode"/>" id="login_img_code" maxlength="4" onblur="loginImgCodeVali()">
        <p class="login-tip2"><span class="orange orange2" id="login_span_imgCode"><!-- 验证码错误 --></span><i class="login-close4 login-closeBg ml5" id="login_i_imgCode"></i></p>
        <!-- <a href="" class="faisongBtn fr mt20"></a> -->
        <p class="faisongnian fr mt20"><img id="img_code" alt="<fmt:message key="headtop.validatenosee"/>" src="../verifyCode/getImage.do" onclick="getImage(this)"></p>
    </div>
<div class="login-jizhi">
<!-- <b class="login-close2 login-closeBg"></b> -->
<input type="checkbox"  id="remember"  class="fl"/><label class="fl" style="font-size: 12px;">&nbsp;<fmt:message key="headtop.rememberme"/></label>
<a href="javascript:void()" onclick="pwdForget()" class="fr blue"><fmt:message key="headtop.forgetpw"/></a>
<!--  -->
<div class="clearfix"></div>
</div>
<a href="javascript:void()" id="hx_dzb" class="loginBtn mt20" onclick="userLogin()"><fmt:message key="headtop.login"/></a>
<span id="tishi"></span>
<div class="mt20">
<span class="fl"><fmt:message key="headtop.nouser"/>?</span><a href="javascript:void()"
onclick="toRegister()" class="blue fl"><fmt:message key="headtop.quickregister"/></a>
</div>
</div>
<!-- 登录结束 -->

注意(必须下载一个:placeholder的插件)
==================================================================================
第二个方法!
document.getElementById("cellPhoneL").setAttribute("value","");
document.getElementById("passWord").setAttribute("value","");
document.getElementById("login_img_code").value = "";
document.getElementById("registerpassword").value = "";
if (!('placeholder' in document.createElement('input'))) {

$('input[placeholder],textarea[placeholder]').each(function() {
var that = $(this), text = that.attr('placeholder');
if (that.val() === "") {
that.val(text).addClass('placeholder');
}
that.focus(function() {
if (that.val() === text) {
that.val("").removeClass('placeholder');
}
}).blur(function() {
if (that.val() === "") {
that.val(text).addClass('placeholder');
}
}).closest('form').submit(function() {
if (that.val() === text) {
that.val('');
}
});
});
}

===============================================================================
第三个方法;
        $("#cellPhoneL").val("");
$("#cellPhoneL").attr("placeholder",$("#cellPhoneL").attr("placeholder"));
$("#passWord").val("");
$("#passWord").attr("placeholder",$("#passWord").attr("placeholder"));
$("#login_img_code").val("");
$("#login_img_code").attr("placeholder",$("#login_img_code").attr("placeholder"));
===============================================================================
第四个方法;
分享到:
评论

相关推荐

    input中placeholder在Ie上兼容

    至于压缩包中的"xmls"文件,根据名称推测可能是一些XML相关的文件,但具体内容和本问题的"input中placeholder在Ie上兼容"知识点没有直接关系,所以在此不做深入讨论。如果你需要关于XML的相关知识,可以提供更具体的...

    vue 清空input标签 中file的值操作

    而在使用Vue.js框架时,清空input标签中type为file的值是一个常见的操作需求。当用户上传了文件后,可能需要提供一个按钮或者操作来清空已经选择的文件信息,以便用户可以重新选择文件,或者清理掉不需要的文件路径...

    将input file的选择的文件清空的两种解决方案

    在网页表单中,`&lt;input type=...总的来说,清空`&lt;input type="file"&gt;`元素选择的文件可以通过多种技术实现,但考虑到浏览器的差异性,推荐使用事件监听和直接修改`value`属性的方式,以确保在各种环境下都能正常工作。

    vue+iview 兼容IE11浏览器的实现方法

    - 在IE11中,清空`input[type=file]`的`value`会触发`change`事件。为了避免这种情况,可以在清除文件选择时进行条件判断,或者监听`change`事件并处理异常情况。 7. **IE11的cookie处理问题**: - 当使用cookie...

    JavaScript实现清空(重置)文件类型INPUT元素值的方法

    本文将详细介绍三种实现清空文件类型input元素值的方法,分析它们在不同浏览器中的兼容性、优缺点,并提供一个综合方案的代码示例。 ### 方法一:设置value属性为空 这种方法简单直接,通过将input元素的value属性...

    IE浏览器支持placeholder

    针对IE浏览器对`placeholder`属性的不兼容问题,开发者通常会采用JavaScript(JS)插件来实现兼容性处理。这些插件通过JavaScript代码模拟`placeholder`的效果,使得在IE浏览器上也能呈现类似的功能。文件名...

    使用jQuery快速解决input中placeholder值在ie中无法支持的问题

    处理函数会在input获得焦点时清空placeholder文本,在input失去焦点且为空时设置为placeholder文本。此外,为input元素添加onfocus和onblur事件处理函数,以实现上述功能。 2. 使用jQuery封装的placeholderSupport...

    input file的默认value清空与赋值方法

    在支持ActiveX的浏览器(如早期版本的IE)中,可以使用`document.execCommand('paste')`或`document.selection.createRange().pasteHTML()`来模拟用户按下删除键。不过,由于现代浏览器的安全策略,这种方法可能无法...

    jquery格式输入插件Masked Input

    此外,该插件具有良好的浏览器兼容性,支持大部分现代浏览器以及较旧的IE版本。 总的来说,jQuery Masked Input 是一款强大且易用的输入格式化工具,它能够极大地提升网页表单的用户体验。通过灵活的配置和丰富的...

    jQuery插件datalist实现很好看的input下拉列表

    本文所介绍的插件兼容性良好,覆盖了IE8及以上版本的浏览器、Firefox和Chrome等现代浏览器。 关于插件的具体使用方法,文章中展示了HTML结构和JavaScript的调用方式。其中,HTML部分创建了一个文本输入框和一个隐藏...

    input 标签实现输入框带提示文字效果(两种方法)

    此外,还有一种更直接的方法,即在`&lt;input&gt;`标签上设置默认值,并使用JavaScript在聚焦时清空输入框: ```html &lt;input type="text" value="提示内容..." onFocus="if(value==defaultValue){value='';this.style....

    一次性选择多文件上传multiple属性

    然而,这个功能并不兼容所有浏览器,特别是较旧的版本,如IE9及以下。 `multiple`属性是HTML5 `&lt;input type="file"&gt;` 元素的一个重要属性,当添加到这个元素上时,用户在文件选择对话框中可以选择多个文件。例如,...

    使用jQuery清空file文件域的解决方案

    本文主要讨论的是如何使用jQuery来解决一个特定的问题:清空`&lt;input type="file"&gt;`(文件域)的值。由于浏览器的安全策略,尤其是Internet Explorer(IE)的限制,直接通过`.val('')`方法无法清空文件域的值。为了...

    IE8 内存泄露(内存一直增长 )的原因及解决办法

    6. 使用兼容模式:在必要时,可以考虑使用IE8的IE7兼容模式,看是否能减轻内存泄露问题。 综上所述,IE8内存泄露问题主要是由于特定DOM节点的内存管理bug,开发者需要采取一些针对性的措施来预防和解决这个问题。...

    js实现的网页图片预览

    本篇文章将详细探讨如何使用JavaScript实现本地及客户端图片预览,并提供一个支持图片比例缩放和清空背景的功能,同时兼容IE8浏览器。 首先,我们需要理解JavaScript如何访问和操作HTML中的元素。在HTML中,我们...

    js动态修改input输入框的type属性(实现方法解析)

    然而,需要注意的是,并非所有浏览器都支持直接通过JavaScript修改`type`属性,尤其是对于`&lt;input&gt;`标签。本文将深入探讨如何在不同浏览器环境下,特别是处理IE兼容性问题时,有效地实现这一功能。 首先,让我们看...

    jQuery placeholder实现源码(兼容所有浏览器)

    然而,`placeholder`属性在某些旧版本的浏览器中(尤其是IE9及以下)并未得到支持。`jQuery`作为一个广泛使用的JavaScript库,可以用来为这些不支持`placeholder`属性的浏览器提供兼容性解决方案。本文将深入解析一...

Global site tag (gtag.js) - Google Analytics