搜索
您的当前位置:首页Html5的placeholder属性(IE兼容)实现代码_jquery

Html5的placeholder属性(IE兼容)实现代码_jquery

时间:2023-12-04 来源:明星茬娱乐

HTML5对Web Form做了许多增强,比如input新增的type类型、Form Validation等。

Placeholder是HTML5新增的另一个属性,当input或者textarea设置了该属性后,该值的内容将作为灰字提示显示在文本框中,当文本框获得焦点时,提示文字消失。以前要实现这效果都是用JavaScript来控制才能实现 , firefox、google chrome等表示对其支持 , 唯独IE存在违和感啊!

例如:

介绍一个超强的让IE下支持placeholder的属性插件,同时也兼容其他不支持placeholder的浏览器,代码如下:

直接把代码复制下来,保存成一个js文件引用即可,不用再做任何处理,超级便利!

ex : 这样做的确能让IE的Input显示placeholder属性,但是如果页面上只有一个input还好,如果是多个input,如果出现input没有填入任何值的话,那么它的空input会自动将placeholder的值填进value里面,从而发生错误.例如:

解决办法就是在后台自己判断啦 , 也许能在上面的js文件里解决 , 以后再研究啦~!

小编还为您整理了以下内容,可能对您也有帮助:

如何解决placeholder的兼容性

Placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。下面介绍placeholder兼容性的处理

在页面添加如下脚本

$(function() {

// 如果不支持placeholder,用jQuery来完成

if(!isSupportPlaceholder()) {

// 遍历所有input对象, 除了密码框

$('input').not("input[type='password']").each(

function() {

var self = $(this);

var val = self.attr("placeholder");

input(self, val);

}

);

/**//* 对password框的特殊处理

* 1.创建一个text框

* 2.获取焦点和失去焦点的时候切换

*/

$('input[type="password"]').each(

function() {

var pwdField = $(this);

var pwdVal = pwdField.attr('placeholder');

var pwdId = pwdField.attr('id');

// 重命名该input的id为原id后跟1

pwdField.after('<input id="' + pwdId +'1" type="text" value='+pwdVal+' autocomplete="off" />');

var pwdPlaceholder = $('#' + pwdId + '1');

pwdPlaceholder.show();

pwdField.hide();

pwdPlaceholder.focus(function(){

pwdPlaceholder.hide();

pwdField.show();

pwdField.focus();

});

pwdField.blur(function(){

if(pwdField.val() == '') {

pwdPlaceholder.show();

pwdField.hide();

}

});

}

);

}

});

// 判断浏览器是否支持placeholder属性

function isSupportPlaceholder() {

var input = document.createElement('input');

return 'placeholder' in input;

}

// jQuery替换placeholder的处理

function input(obj, val) {

var $input = obj;

var val = val;

$input.attr({value:val});

$input.focus(function() {

if ($input.val() == val) {

$(this).attr({value:""});

}

}).blur(function() {

if ($input.val() == "") {

$(this).attr({value:val});

}

});

}

html中input文本框,初始里边有文字提示,当点击时,文字消失,怎么设置?

需要准备的材料分别有:电脑、浏览器、html编辑器。

1、首先,打开html编辑器,新建html文件,例如:index.html。

2、在index.html中的<body>标签中,输入html代码:<input type="text" placeholder="清输入用户名" />。

3、浏览器运行index.html页面,文本框初始有文字。

4、点击文本框,文字成功消失。

jQuery动态修改placeholder

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>表单</title>

<script src="jquery-1.8.0.min.js"></script><!--请引入jq库-->

<style type="text/css"></style>

<script>

$(function(){

var inp = $('#inp');

inp.focus(function(){

$(this).attr('placeholder','请输入企业名')

})

})

</script>

</head>

<body>

<input type="text" id="inp" placeholder="请输入用户名">

</body>

</html>

扩展资料

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>XXX</title>

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<script language="JavaScript" src="../js/jquery-1.4.2.js"></script>

<style type="text/css">

div,span{

width: 140px;

height: 140px;

margin: 20px;

background: #9999CC;

border: #000 1px solid;

float:left;

font-size: 17px;

font-family:Roman;

}

div.mini{

width: 30px;

height: 30px;

background: #CC66FF;

border: #000 1px solid;

font-size: 12px;

font-family:Roman;

}

</style>

<!--引入jquery的js库-->

</head>

<body>

<input type="text" placeholder="用户邮箱/手机号/用户名"  id="b1"/><br>

<input type="password" value=""  id="b2"/><br>

<input type="button" value="登陆"  id="b3"/>

<br>  

</body>

<script language="JavaScript">

$("#b1").focus(function(){

$(this).attr('placeholder',"");

});

$("#b1").blur(function(){

if($(this).val()==""){

$(this).attr('placeholder','${sessionScope.xxxxxxx}');

}

});

</script>

</html>

参考资料:jQuery官网 jQuery.html

html里输入框和密码框的提示文字怎么弄

需要准备的材料分别有:电脑、chrome浏览器、html编辑器。

1、首先打开html编辑器,新建一个html文件,例如:index.html。

2、在index.html中的<body>标签中,输入以下html代码:

<input type="text" placeholder="请输入账号" />

<input type="password" placeholder="请输入密码" />

3、浏览器运行index.html页面,此时的输入框有了提示文字“请输入账号”,密码框有了提示文字“请输入密码”。

明星茬娱乐还为您提供以下相关内容希望对您有帮助:

如何解决placeholder的兼容性

Placeholder在不支持html5的低版本的浏览器中,placeholder属性是无效的,例如ie9及以下的ie浏览器不兼容这个属性。在页面添加如下脚本 (function() { // 如果不支持placeholder,用jQuery来完成 if(!isSupportPlaceholder()) ...

html5 placeholder ie10以下不兼容

加上这个jquery代码可以解决兼容 (function(){if(!placeholderSupport()){ // 判断浏览器是否支持 placeholder $('[placeholder]').focus(function() { var input = $(this); if (input.val() == input...

用jquery怎么实现点击密码输入框,上面的提示文字“请输入密码”消失,失 ...

方法1.对于支持placeholder属性的浏览器。可以暂且认为除了老版本的IE系列浏览器都支持这个属性。可以直接在input标签上附加属性,如下:&lt;input type="password" name="pwd" placeholder="请输入密码" /&gt;方法2.对于不支持placeh...

html中input文本框,初始里边有文字提示,当点击时,文字消失,怎么设置...

1、首先,打开html编辑器,新建html文件,例如:index.html。2、在index.html中的&lt;body&gt;标签中,输入html代码:&lt;input type="text" placeholder="清输入用户名" /&gt;。3、浏览器运行index.html页面,文本框初始有文字。4、...

html里输入框和密码框的提示文字怎么弄

1、首先打开html编辑器,新建一个html文件,例如:index.html。2、在index.html中的&lt;body&gt;标签中,输入以下html代码:&lt;input type="text" placeholder="请输入账号" /&gt; &lt;input type="password" placeholder="请输入密码" ...

怎么实现placeholder一样的功能

placeholder是html5新增的input的一个熟悉,主要是让表单体验更加智能,相当于value属性,但是他有一个好处就是当我们聚焦输入文本的时候我们在placeholder="默认值"的文本就会自动清空,,不过兼容性还不太好,至少ie好像要9...

如何设置placeholder的样式

注1:冒号前写对应的input或textarea元素等。注2:placeholder属性是css3中新增加的属性,IE9和Opera12以下版本的CSS选择器均不支持占位文本。eg:css代码 input-test{ color: #FFC0CB;font-size: 1.2em;width: 180px;...

html5的placeholder这个属性在获得焦点时怎样让默认的字体消失呢?_百 ...

输入框获得焦点时,placeholder 没有变化,只有当输入框中输入了内容时,placeholder 才消失(这也是主流做法);而在 Safari 和 IE9+ 或其他使用以上两种内核的浏览器中,当输入框获得焦点时,placeholder 便会消失。

jquery如何封装插件jquery封装插件的方法

HTML5CrossBrowserPolyfills一堆Polyfills flexibility让旧的IE也支持Flexbox 选择器增强 Lining.js让浏览器实现类似::nth-line(),::nth-last-line()的效果 未归类 prefixfree用了它,写css时,就不需要加浏览器的前缀了 表单类 jquery-...

什么是placeholder属性?

在上述代码中,我们使用了placeholder属性来定义了两个输入框的占位符文本,告诉用户应该输入什么。5. 总结 Placeholder是一个十分有用的程序设计技术,可以提高代码的可读性、减少重复代码、增加程序的灵活性和扩展性、提高代码...

Top