支持HTML5 的浏览器:IE9+,FF4,chrome可以直接使用文本元素的placeholder来确定提示文案,但是IE8以下等浏览器却没有这个选项,下面通过JS来进行模拟,
模拟有两种方法1、通过元素的value属性(这种方法的缺点是表单提交时会把提示文案误认为真正的值) 2、通过label标签 ,这段代码是网络上的,模拟label实现,
原生JS支持,感觉比较好,这里做个记录。。
<script type="text/javascript">
function(){
var funPlaceholder = function(element) {
//检测是否需要模拟placeholder
var placeholder = '';
if (element && !("placeholder" in document.createElement("input")) && (placeholder = element.getAttribute("placeholder"))) {
//当前文本控件是否有id, 没有则创建
var idLabel = element.id ;
if (!idLabel) {
idLabel = "placeholder_" + new Date().getTime();
element.id = idLabel;
}
//创建label元素
var eleLabel = document.createElement("label");
eleLabel.htmlFor = idLabel;
eleLabel.style.position = "absolute";
//根据文本框实际尺寸修改这里的margin值
eleLabel.style.margin = "2px 0 0 3px";
eleLabel.style.color = "graytext";
eleLabel.style.cursor = "text";
//插入创建的label元素节点
element.parentNode.insertBefore(eleLabel, element);
//事件
element.onfocus = function() {
eleLabel.innerHTML = "";
};
element.onblur = function() {
if (this.value === "") {
eleLabel.innerHTML = placeholder;
}
//checkValue(this);
};
//样式初始化
if (element.value === "") {
eleLabel.innerHTML = placeholder;
}
}
};
funPlaceholder(document.getElementsByName("province")[0]);
funPlaceholder(document.getElementsByName("subBankName")[0]);
funPlaceholder(document.getElementsByName("city")[0]);
}();
</script>