`

解决placeholder在IE浏览器不兼容的问题

    博客分类:
  • Java
阅读更多

解决placeholder在IE浏览器不兼容的问题

 

解决方式:加上label标签。(IE显示该标签,其他浏览器不显示。)

 

1.html:

<div class="fl">
	<label id="oldPwdTip">为了您账户安全请修改原始密码</label>
    <input id="oldPwd" class="usertext" type="password" name="userName" placeholder="为了您账户安全请修改原始密码"
    	onkeypress="hideOldPwdTip();" onblur="toggleOldPwdTip(this.value);" />
    <span id="oldPwdTip2"></span>
</div>

 

2.样式:(注意float和absolate)

.fl{ float:left; width:350px; margin-left:8px;}
#oldPwdTip{
	position: absolute;
	color : #ccc;
	margin-top : 6px;
	margin-left : 6px;
}

 

3.IE显示label脚本:

$(function(){
	/* IE浏览器的输入框提示 */
	var platform = navigator.platform;
	var o = navigator.appName ;
	if (o.toString().indexOf("Internet") == -1) {
		document.getElementById("oldPwdTip").style.cssText = "display: none;" ;
		document.getElementById("newPwdTip").style.cssText = "display: none;" ;
		document.getElementById("repeatPwdTip").style.cssText = "display: none;" ;
	}
});

 

4.按下键盘不显示,失去焦点重新显示:

function hideOldPwdTip() {
	document.getElementById("oldPwdTip").style.cssText = "display: none;" ;
}

function toggleOldPwdTip(v) {
	if (!v) {
		var o = navigator.appName ;
    	if (o.toString().indexOf("Internet") != -1) {
			document.getElementById("oldPwdTip").style.cssText = "display: block;" ;
    	}
	}
}

 

Chrome:

 

IE:

 

 

  • 大小: 1.2 KB
  • 大小: 1.3 KB
分享到:
评论

相关推荐

    input中placeholder在Ie上兼容

    以下是一个简单的jQuery插件示例,用于在不支持`placeholder`属性的IE浏览器中实现类似的功能: ```javascript (function($){ // 检查浏览器是否支持placeholder属性 if (!('placeholder' in document....

    IE浏览器支持placeholder

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

    IE8 placeholder 兼容使用插件(可兼容password类型input)

    IE8 placeholder 兼容使用插件。可兼容password类型,可以正常显示提示字。

    IE兼容placeholder js

    描述中提到的“完美兼容H5 placeholder属性在IE9及以下版本的问题”,意味着这个解决方案能够有效地在不支持`placeholder`属性的IE浏览器上模拟出相同的效果。"自测可用,修改点少"表示这个解决方案经过了实际测试,...

    解决IE下不支持placeholder属性

    本文将深入探讨`placeholder`属性,以及如何通过一些解决方案来解决IE浏览器不支持的问题。 `placeholder`属性是HTML5中用于文本输入框`&lt;input&gt;`和文本区域`&lt;textarea&gt;`的一个非常有用的特性。它允许开发者在输入框...

    placeholder属性支持所有IE浏览器的插件

    总结起来,这个插件解决了H5`placeholder`属性在IE浏览器中的兼容性问题,通过代码封装和闭门技术实现了跨浏览器的支持。对于开发者来说,这是一个极好的学习资源,可以帮助他们提高在实际项目中处理浏览器兼容性...

    ie placeholder属性的兼容性问题解决方法

    但是在不支持html5的低版本的浏览器中,placeholder属性是无效的,为了解决这个问题,因此,人为的去实现placeholder属性: 复制代码代码如下: //placeholder功能实现 var placeholder = { add: function (el) { if...

    html5.js-ie浏览器兼容处理文件

    HTML5.js是一个专门为老旧的...总之,HTML5.js是为了解决旧版IE浏览器与HTML5新特性的兼容问题而存在的。在实际项目中,合理运用此类工具可以提升网站的跨浏览器兼容性,但也需要注意性能优化和逐步淘汰老技术的策略。

    placeholder(HTML 5) IE 兼容插件

    这篇博客文章(https://alxw4616.iteye.com/blog/2098609)很可能介绍了如何利用JavaScript或者jQuery来为不支持`placeholder`属性的IE浏览器添加兼容性。通常,这种插件会监听输入框的事件,如`focus`和`blur`,并...

    IE8兼容性和判断IE浏览器版本

    IE8兼容性是前端开发中经常遇到的问题,特别是在使用老版本的IE浏览器时。下面是IE8兼容性中的一些常见问题和解决方法: 首先,IE8只支持jquery2.0以下的版本,因此在使用jquery时需要注意版本问题。 其次,IE8不...

    IE下实现placeholder效果的jquery插件

    总的来说,"placeholderfriend.js"插件为开发者提供了一种便捷的方式来解决IE浏览器对`placeholder`属性的支持问题,使得在旧版IE中也能享受到与现代浏览器相似的用户体验。通过理解其工作原理和使用方法,我们可以...

    完美解决IE(IE6/IE7/IE8)不兼容HTML5

    许多jQuery插件如html5shiv-responsive-images、jquery.placeholder等专门用于解决IE浏览器的HTML5兼容问题。 4. **条件注释**: IE浏览器特有的条件注释允许我们针对不同版本的IE插入特定的CSS或JS代码。例如,我们...

    两种方法基于jQuery实现IE浏览器兼容placeholder效果

    标题中提到的知识点是"基于jQuery实现IE浏览器兼容placeholder效果"。jQuery是一个快速、小巧、功能丰富的JavaScript库,它通过简化HTML文档遍历、事件处理、动画和Ajax交互等操作,使得Web开发变得更加容易。而IE...

    ie8兼容html5 css3圆角阴影渐变placeholder等属性

    - CSS3 PIE:这是一个流行的JavaScript库,通过VML(Vector Markup Language)技术为旧版IE浏览器提供对CSS3边框半径、圆角、阴影等特性的支持。 - Modernizr:这是一个JavaScript库,用于检测浏览器对HTML5和CSS3...

    input框中出现提示文字(兼容ie 火狐 谷歌)

    然而,浏览器的兼容性问题一直是开发者面临的一大挑战,特别是对于较老版本的IE浏览器。`placeholder`属性是HTML5引入的新特性,它允许我们在`&lt;input&gt;`元素内设置提示文本,但遗憾的是,这个特性在IE8及以下版本并不...

    placeholder效果的jQuery插件,支持IE6、IE7

    总的来说,这个jQuery插件是一个解决浏览器兼容性问题的实用工具,使得在老版本的IE浏览器上也能实现HTML5的placeholder效果,从而提高用户体验。通过学习和使用这个插件,开发者可以更好地理解和掌握如何利用jQuery...

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

    本文将详细介绍两种利用jQuery库快速解决input中placeholder值在IE浏览器中无法支持的方法。首先,了解在IE中placeholder无法显示的原因是IE 9以下的版本不支持该属性。为此,需要采用JavaScript脚本来模拟这一功能...

    jquery.placeholder.js

    总结来说,`jquery.placeholder.js`是一个小巧而实用的jQuery插件,它解决了IE浏览器对`placeholder`属性的兼容性问题,使得无论在哪个浏览器环境下,用户都能享受到一致的用户体验。通过简单的引入和调用,以及可选...

Global site tag (gtag.js) - Google Analytics