所有IE上的Html5占位符问题
Html5 placeholder Issue on all IE
我似乎对HTML5占位符有一个奇怪的问题。我使用下拉菜单来显示/隐藏div,在div中我有几个文本字段
当我从下拉菜单中选择一个选项来显示div时,div会显示出来,但占位符不在文本字段中。
任何帮助都将不胜感激。
占位符插件
<script type='text/javascript'>
$(document).ready(function(){
$("#customertype").change(function() {
if ($("#customertype option[value='new']").attr('selected')) {
$('#newcustomer').show();
}
if ($("#customertype option[value='existingcustomer']").attr('selected')) {
$('#newcustomer').hide();
$('#existingcustomer').show();
}
});
});
</script>
<!--Start New Customer -->
<div id="newcustomer" style="display:none;">
<div id="field"> <span id="sprytextfield5">
<input class="input address" type="text" name="address" placeholder="Enter Mailing Address" id="address" />
</span> <span id="sprytextfield6">
<input class="input" type="text" name="city" placeholder="Enter City" id="city" />
</span> <span id="sprytextfield7">
<input class="input" type="text" name="province" placeholder="Enter Province" id="province" />
</span> <span id="sprytextfield8">
<input class="input" type="text" name="postalcode" placeholder="Enter Postal Code" id="postalcode" />
</span> </div>
</div>
<!--End New Customer -->
IE不支持占位符,至少在9之前是这样。
https://github.com/madeinstefano/ie-placeholder/blob/master/ie-placeholder.js
使用以下代码:
//IE placeholder;
$(function (){
if (/MSIE 9|MSIE 8|MSIE 7|MSIE 6/g.test(navigator.userAgent)) {
function resetPlaceholder() {
if ($(this).val() === '') {
$(this).val($(this).attr('placeholder'))
.attr('data-placeholder', true)
.addClass('ie-placeholder');
if ($(this).is(':password')) {
var field = $('<input />');
$.each(this.attributes, function (i, attr) {
if (attr.name !== 'type') {
field.attr(attr.name, attr.value);
}
});
field.attr({
'type': 'text',
'data-input-password': true,
'value': $(this).val()
});
$(this).replaceWith(field);
}
}
}
$('[placeholder]').each(function () {
//ie user refresh don't reset input values workaround
if ($(this).attr('placeholder') !== '' && $(this).attr('placeholder') === $(this).val()){
$(this).val('');
}
resetPlaceholder.call(this);
});
$(document).on('focus', '[placeholder]', function () {
if ($(this).attr('data-placeholder')) {
$(this).val('').removeAttr('data-placeholder').removeClass('ie-placeholder');
}
}).on('blur', '[placeholder]', function () { resetPlaceholder.call(this); });
$(document).on('focus', '[data-input-password]', function () {
var field = $('<input />');
$.each(this.attributes, function (i, attr) {
if (['type','data-placeholder','data-input-password','value'].indexOf(attr.name) === -1) {
field.attr(attr.name, attr.value);
}
});
field.attr('type', 'password').on('focus', function () { this.select(); });
$(this).replaceWith(field);
field.trigger('focus');
});
}
});
相关文章:
- 使用javascript的Asp.net内容占位符
- Internet Explorer缺少占位符支持,特别是密码字段
- 如何隐藏按钮单击事件上的占位符
- 需要URL模板占位符查找和替换功能的输入
- 初始化ng模型时,Angular ui选择占位符不起作用
- 如何在ie7或更高版本中设置密码字段的占位符
- 在不使用javascript的情况下,可以在表单字段中设置文本占位符(以提示最终用户插入特定格式)
- Select2-使用自定义模板时不显示占位符
- 替换字符串中的占位符值
- 为什么我应该使用HTML5(上下文:占位符)
- 在contentEditable元素中居中占位符插入符号
- 从气球弹出窗口中删除占位符
- 选择“选项”时更改输入的占位符
- 错误:ReCAPTCHA占位符元素必须为空
- Primefaces占位符和水印导致IE11 5.2版的自动完成面板出现问题
- HTML:密码字段中的HTML5占位符属性问题 - 显示正常文本
- 内容可编辑占位符问题
- 版式中的占位符文本回退事件问题
- 所有IE上的Html5占位符问题
- 在Mozilla Firefox中,占位符可以正常工作,但在按esc键时出现问题