IE8 的 Javascript 占位符不起作用 [重复]
Posted
技术标签:
【中文标题】IE8 的 Javascript 占位符不起作用 [重复]【英文标题】：Javascript placeholder for IE8 is not working [duplicate] 【发布时间】：2013-12-17 21:38:18 【问题描述】：我正在尝试为 IE7、IE8 和 IE9 提供占位符解决方法。从互联网上的代码中，我找到了 javascript，并尝试使用这样的简单页面对其进行测试：
<html>
<HEAD>
<script type="text/javascript">
$('[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().parents('form').submit(function()
$(this).find('[placeholder]').each(function()
var input = $(this);
if (input.val() == input.attr('placeholder'))
input.val('');
)
);
</script>
</head>
<body>
<form>
<input class="placeholder" type="text" name="nama" placeholder="try">
</form>
</body>
</html>
我希望在 IE 8 上显示一个带有占位符文本“try”的输入。但它没有显示任何内容。我已经尝试了任何我可以在 javascript 代码之外尝试的东西，比如擦除 class 属性、将 complete 属性添加到 form 标记等等。但占位符似乎仍未显示。你能帮我看看这段代码有什么问题吗？我还是 javascript 和 web 编程的新手，所以这个错误对我来说可能不是很明显。
我从https://gist.github.com/hagenburger/379601得到代码
【问题讨论】：
感谢所有将此问题标记为重复的人，但事实证明，我需要的不是“这个问题在这里已经有答案：”部分或其他地方。只有两个人真正有帮助，而我需要并为我工作的解决方案实际上就像某人 (HaukurHaf) 指出的那样简单：“你的脚本运行得太早了！”我认为这比将我的问题标记为重复要容易，因为我找不到任何具有我需要的答案的“重复”问题。 【参考方案1】：只需复制此代码并将其保存为 placeholder.js。
(function( $ )
$.fn.placeHolder = function()
var input = this;
var text = input.attr('placeholder'); // make sure you have your placeholder attributes completed for each input field
if (text) input.val(text).css( color:'grey' );
input.focus(function()
if (input.val() === text) input.css( color:'lightGrey' ).selectRange(0,0).one('keydown', function()
input.val("").css( color:'black' );
);
);
input.blur(function()
if (input.val() == "" || input.val() === text) input.val(text).css( color:'grey' );
);
input.keyup(function()
if (input.val() == "") input.val(text).css( color:'lightGrey' ).selectRange(0,0).one('keydown', function()
input.val("").css( color:'black' );
);
);
input.mouseup(function()
if (input.val() === text) input.selectRange(0,0);
);
;
$.fn.selectRange = function(start, end)
return this.each(function()
if (this.setSelectionRange) this.setSelectionRange(start, end);
else if (this.createTextRange)
var range = this.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
);
;
)( jQuery );
仅用于一个输入
$('#myinput').placeHolder(); // just one
当浏览器不支持 HTML5 占位符属性时，我建议您在网站上的所有输入字段上实现它：
var placeholder = 'placeholder' in document.createElement('input');
if (!placeholder)
$.getScript("../js/placeholder.js", function()
$(":input").each(function() // this will work for all input fields
$(this).placeHolder();
);
);
【讨论】：
【参考方案2】：您的脚本运行到很早。您需要使用文档就绪事件来启动脚本，或者将其移动到页面底部。我更喜欢文档就绪事件。见下文：
<script type="text/javascript">
$(function()
$('[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().parents('form').submit(function()
$(this).find('[placeholder]').each(function()
var input = $(this);
if (input.val() == input.attr('placeholder'))
input.val('');
)
);
);
</script>
【讨论】：
以上是关于IE8 的 Javascript 占位符不起作用 [重复]的主要内容，如果未能解决你的问题，请参考以下文章
webapi调用nodejs到postgres，多个占位符不起作用
mat-autoComplete 中的占位符不起作用，如 Angular Material Documentation 中所示