如下图,在文本框为空时显示提示文字
在IE10+和chrome浏览器加placeholder属性及可实现 ,单在IE10-浏览器并不支持该属性,
以下是placeholder在IE10-浏览器的实现
1 <style type="text/css"> 2 /*输入框为空时提示文字的样式*/ 3 label.placeholder 4 { 5 color: gray; 6 padding-left: 3px; 7 cursor: text; 8 z-index: 1000; 9 position: absolute;10 background: transparent;11 font-size: 0.8em;12 padding-top: 4px;13 }14</style>15<script type="text/javascript">16 /* 设置输入框为空时输入框内显示/隐藏提示文字17 * @param show 是否显示提示文字,默认显示18 */19 $.fn.setHint = function (show) {20 if ('placeholder' in document.createElement('input'))21 return;22 23 var word = this.attr("placeholder");24 if (word) {25 show = (show == undefined) ? (this.val() == "") : show; //根据内容是否为空确定是否显示26 if (show && this.val() == "") {27 this.prev("label.placeholder").show();28 } else if (!show) {29 this.prev("label.placeholder").hide();30 }31 }32 };33 34 // 页面初始化执行的脚本35 $(function () {36 // IE10及以上浏览器支持placeholder属性,不需要用脚本实现 37 if (!('placeholder' in document.createElement('input'))) {38 $(":text[placeholder],:password[placeholder],textarea[placeholder]").wrap("<span></span>")39 .focus(function () {40$(this).prev("label.placeholder").hide();41 }).blur(function () {42if ($(this).val() == "") {43 $(this).prev("label.placeholder").show();44}45 }).each(function () {46var labelHtml = "<label class='placeholder'>" + $(this).attr("placeholder") + "</label>";47$(labelHtml).insertBefore(this).click(function () {48 $(this).hide().next().focus();49}).toggle($(this).val() == "");50 });51 }52 });53</script>
html:
<input type="text"placeholder="请输入用户名" />
