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

发布时间：2023-05-16

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

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

推荐文章