您的位置:

如何利用placeholder提升网页交互体验?

一、什么是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>

当用户选择了要上传的图片之后,图片预览的区域就会自动显示图片,同时占位符文本也会立即消失。这样的实现方式,更让用户更加清晰明了地明白当前操作的效果。