一、什么是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>
当用户选择了要上传的图片之后，图片预览的区域就会自动显示图片，同时占位符文本也会立即消失。这样的实现方式，更让用户更加清晰明了地明白当前操作的效果。
原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/233547.html
微信扫一扫 
支付宝扫一扫 