js+css实现增加表单可用性之提示文字

这里给出JS和CSS实现增加表单可用性之提示文字的完整攻略。

攻略详解

概述

表单是我们日常工作和生活中不可或缺的一部分，为了方便用户填写表单时可以更加清晰明了地知道每个输入框的作用，我们需要在表单中添加提示文字。在这里，我们可以通过JS和CSS的组合，为表单添加提示文字，并且在用户输入时自动隐藏。

实现步骤

1. 首先，在HTML代码中为表单添加一个CSS类名，例如：.input-label。

2. 在CSS 中为.input-label添加样式，并将提示文字的颜色设为浅灰色：

.input-label {
  position: relative;
}

.input-label label {
  position: absolute;
  left: 10px;
  top: 10px;
  font-size: 14px;
  color: #999;
  pointer-events: none;
  transition: .2s all;
}

.input-label input:focus + label,
.input-label textarea:focus + label {
  top: -15px;
  font-size: 12px;
  color: #007bff;
}

说明：

• position: relative;：将容器设置为相对定位。
• position: absolute;：将提示文字设置为绝对定位，以确保提示文字在输入框正上方。
• left: 10px; top: 10px;：设置提示文字的位置。
• font-size: 14px;：设置提示文字的字体大小。
• color: #999;：设置提示文字的颜色，这里设置为浅灰色。
• pointer-events: none;：禁止提示文字响应鼠标事件（例如鼠标移动、点击等）。

• transition: .2s all;：设置提示文字的动画效果。

• 接下来，我们需要在JavaScript中实现当用户点击表单输入框时，提示文字隐藏或变为小字体。

$('.input-label input, .input-label textarea').on('focus', function() {
  $(this).parent().addClass('focus');
});

$('.input-label input, .input-label textarea').on('blur', function() {
  if ($(this).val() === '') {
    $(this).parent().removeClass('focus');
  }
});

说明：

• $('.input-label input, .input-label textarea').on('focus', function() {：当表单输入框获得焦点时，即被点击时，执行以下的代码。
• $(this).parent().addClass('focus');：为当前输入框的父元素添加focus类名，这时提示文字会变为小字体。
• $('.input-label input, .input-label textarea').on('blur', function() {：当表单输入框失去焦点时，即被点击外部其他区域时，执行以下的代码。
• if ($(this).val() === '') { $(this).parent().removeClass('focus'); }：如果当前输入框的value为空（即用户未输入），则将对应父元素的focus类名移除。

示例说明

下面是两个应用示例：

示例一

下面是一个输入框和提交按钮，提交按钮只有在输入框内容不为空时才会显示。

<div class="input-label">
    <input type="text" name="username" id="username">
    <label for="username">Username</label>
</div>

<button type="submit" class="btn btn-primary form-btn" id="submit-btn" style="display:none;">Submit</button>

CSS 和 JS 代码可以参考攻略详解中的代码。

示例二

这个示例展示了在添加删除元素时，动态添加文字的功能。当用户点击添加按钮添加新的文本框时，表单会提示用户使用文本框的名称。当用户移除文本框时，提示文字会自动消失。

<div class="input-label">
    <input type="text" name="first_name" id="first_name">
    <label for="first_name">First Name</label>
</div>

<div class="input-label">
    <input type="text" name="last_name" id="last_name">
    <label for="last_name">Last Name</label>
</div>

<div id="fields-container"></div>

<button type="button" id="add-field-btn">Add Field</button>

$(document).ready(function() {
  $('#add-field-btn').on('click', function() {
    var fieldCount = $('#fields-container .input-label').length + 1;
    var fieldId = 'field' + fieldCount;
    var $newField = $('<div class="input-label"><input type="text" name="' + fieldId + '" id="' + fieldId + '"><label for="' + fieldId + '">Field ' + fieldCount + '</label></div>');
    $('#fields-container').append($newField);
  });

  $(document).on('click', '.input-label input', function() {
    $(this).parent().addClass('focus');
  });

  $(document).on('blur', '.input-label input', function() {
    if ($(this).val() === '') {
      $(this).parent().removeClass('focus');
    }
  });

  $(document).on('click', '#fields-container .input-label', function() {
    $(this).remove();
  });
});

这个示例中，$('#add-field-btn').on('click', function() { 会动态添加一个新的输入框，并将它的名称设为“Field N”，其中 N 是当前的新增文本框的数量。

在添加文本框的时候，CSS代码会将提示文字添加到每个新的输入框中。

在删除文本框的时候，提示文字也会随之消失。

以上就是JS和CSS实现增加表单可用性之提示文字的完整攻略。