一、什么是placeholder?
Placeholder是指HTML5新增的input元素的一个属性,在表单中用于提供一些文本提示,方便用户输入,更为人性化。
同时也有利于提升网页的交互体验。因为用户可以清晰地知道需要输入什么内容,降低输入错误的可能性,给用户提供更好的输入体验。
二、如何使用placeholder?
在HTML代码中,直接在input标签内添加placeholder属性,属性值即为需要提示用户输入的文本内容。比如:
<input type="text" name="username" placeholder="请输入用户名">
当用户点击输入框,输入框内的默认文本就会消失,等到用户开始输入时,placeholder内的内容就会随着输入内容自动消失。
三、如何修改placeholder的样式?
默认情况下,placeholder的样式会与input文本框内的文字保持一致。但是,有时候我们需要给placeholder添加一些特定的样式,以便它更加醒目。
可以使用CSS样式来改变placeholder的样式,下面是一个例子:
<input type="text" name="username" placeholder="请输入用户名" style="color: #999;font-size: 14px;font-weight: normal;">
这里我们为placeholder添加了颜色、字体大小、以及字体粗细三种CSS属性,这样就可以根据需要来为placeholder增加一些定制化的样式。
四、如何为不支持placeholder的浏览器添加placeholder功能?
尽管placeholder已经成为了HTML5的标准属性,但是在一些老旧的浏览器中依旧不支持placeholder属性。为了给用户提供更好的交互体验,我们需要为这些浏览器添加placeholder的支持。
这里我们可以使用JavaScript来实现占位符文本的效果。下面是一个兼容不支持placeholder的浏览器的JavaScript代码:
<script> var input = document.createElement("input"); if(('placeholder' in input)==false){ $('[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(); $('[placeholder]').parents('form').submit(function(){ $(this).find('[placeholder]').each(function(){ var input = $(this); if(input.val() == input.attr('placeholder')){ input.val(''); } }) }); } </script>
这里我们首先检测当前浏览器是否支持placeholder,如果不支持就使用JavaScript来模拟实现。然后我们绑定了focus与blur事件来实现placeholder效果。同时,还支持表单提交时的有效性检测。
五、如何使用placeholder增强网页的交互体验?
除了常规的表单输入,我们还可以将placeholder运用到图片、视频等多种格式的输入中,从而提升用户体验。
如下面的一个例子,当用户上传一张图片时,在上传按钮下显示出图片的预览,并且在预览图片中增加placeholder的效果,为用户提供更好的操作体验:
<form enctype="multipart/form-data" action="#" method="post"> <input type="file" name="file" id="file" onchange="previewImage(this)" accept="image/*"> <input type="submit" name="submit" value="提交"> </form> <div> <img id="previewImage" src="#" alt="预览图片"> <span id="previewPlaceholder" class="placeholder">这里将显示预览图片</span> </div> <script type="text/javascript"> function previewImage(fileObj) { if (fileObj.files && fileObj.files[0]) { var newImage = document.getElementById('previewImage'); var reader = new FileReader(); reader.onload = function (evt) { newImage.src = evt.target.result; } reader.readAsDataURL(fileObj.files[0]); $('#previewPlaceholder').removeClass('placeholder'); $('#previewPlaceholder').html(''); }else{ newImage.src = fileObj.value; } } </script>
当用户选择了要上传的图片之后,图片预览的区域就会自动显示图片,同时占位符文本也会立即消失。这样的实现方式,更让用户更加清晰明了地明白当前操作的效果。