使用jQuery快速解决input中placeholder值在ie中无法支持的问题
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用jQuery快速解决input中placeholder值在ie中无法支持的问题相关的知识，希望对你有一定的参考价值。
参考技术A 本篇文章主要介绍了使用jQuery快速解决input中placeholder值在ie中无法支持的问题。需要的朋友可以过来参考下，希望对大家有所帮助代码如下:
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta
http-equiv="Content-Type"
content="text/html;
charset=utf-8"
/>
<title>无标题文档</title>
<script
type="text/javascript"
src="js/jquery-1.4.2.min.js"></script>
<script
type="text/javascript">
//第一种方法
$(document).ready(function()
var
doc=document,inputs=doc.getElementsByTagName('input'),supportPlaceholder='placeholder'in
doc.createElement('input'),placeholder=function(input)var
text=input.getAttribute('placeholder'),defaultValue=input.defaultValue;
if(defaultValue=='')
input.value=text
input.onfocus=function()
if(input.value===text)this.value='';
input.onblur=function()if(input.value==='')this.value=text;
if(!supportPlaceholder)
for(var
i=0,len=inputs.length;i<len;i++)var
input=inputs[i],text=input.getAttribute('placeholder');
if(input.type==='text'&&text)placeholder(input));
//第二种方法
$(function()
if(!placeholderSupport())
//
判断浏览器是否支持
placeholder
$('[placeholder]').focus(function()
var
input
=
$(this);
if
(input.val()
==
input.attr('placeholder'))
input.val('');
input.removeClass('placeholder');
).blur(function()
var
input
=
$(this);
if
(input.val()
==
''
||
input.val()
==
input.attr('placeholder'))
input.addClass('placeholder');
input.val(input.attr('placeholder'));
).blur();
;
)
function
placeholderSupport()
return
'placeholder'
in
document.createElement('input');
</script>
</head>
<body>
<form>
<label
for="name">用户名：</label>
<input
type="text"
placeholder="请输入用户名"/>
</form>
</body>
</html>
JQuery的$和其它JS发生冲突的快速解决方法
众所周知，jQuery是目前最流行的JS封装包，简化了很多复杂的JS程序，JQuery讲浏览器DOM树定义为$，通过$来获取各个子节点。
然后，JS插件并非只有JQuery，还有prototype.js 等其它比较好的插件。它们也使用$。所以有时候同时使用这个两个JS插件的时候，就会出现$的使用权冲突问题。现在我们来看看如何解决这个冲突问题。请看下文：
我们都知道JQuery有一个函数，jquery.noConflict() 它的作用是讲$的控制权转让出去。然后我们可以通过jQuery代替$来获取dom节点
举例：
方法一：
代码如下:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function(){ //使用jQuery
jQuery("p").click(function(){
alert( jQuery(this).text() );
});
});
$("pp").style.display = ‘none‘; //使用prototype
</script>
方法二：
我们可以通过noConflict()函数来定义一个快捷方式用来获取dom节点
代码如下:
<script type="text/javascript">
var $j = jQuery.noConflict(); //自定义一个比较短快捷方式
$j(function(){ //使用jQuery
$j("p").click(function(){
alert( $j(this).text() );
});
});
$("pp").style.display = ‘none‘; //使用prototype
</script>
还有其它的方法，都给大家列举出来，同理都可以看明白了吧，呵呵。
方法三：
代码如下:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
jQuery(function($){ //使用jQuery
$("p").click(function(){ //继续使用 $ 方法
alert( $(this).text() );
});
});
$("pp").style.display = ‘none‘; //使用prototype
</script>
方法四：
代码如下:
<script type="text/javascript">
jQuery.noConflict(); //将变量$的控制权让渡给prototype.js
(function($){ //定义匿名函数并设置形参为$
$(function(){ //匿名函数内部的$均为jQuery
$("p").click(function(){ //继续使用 $ 方法
alert($(this).text());
});
});
})(jQuery); //执行匿名函数且传递实参jQuery
$("pp").style.display = ‘none‘; //使用prototype
</script>
以上是关于使用jQuery快速解决input中placeholder值在ie中无法支持的问题的主要内容，如果未能解决你的问题，请参考以下文章
jquery代码修改input的value值，而页面上input框的值没有改变的解决办法
python测试开发django-186.使用 jquery 的 .val() 无法获取input框的输入值(已解决)
input是否checked与使用jquery的attr或prop方法无关