如何使用jQuery Mobile创建一个占位符输入

使用jQuery Mobile创建一个占位符输入，可以使用<label>元素和<input>元素结合使用。在<label>元素中包含两个元素：一个<span>元素，用于显示占位符，以及一个<input>元素，用户在其中输入内容。

下面是创建一个占位符输入的步骤：

在HTML文件中导入jQuery Mobile的CSS和JS库：

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>

创建一个<label>元素和一个<input>元素：

<label for="username">
  <span class="placeholder">Username</span>
  <input type="text" name="username" id="username">
</label>

这里的for属性与<input>元素的id属性相同，用于将<label>元素与<input>元素关联起来，实现点击占位符时自动聚焦到相应的<input>元素。

在CSS中添加样式：

/* 显示占位符文本 */
.placeholder {
  position: absolute;
  left: 10px;
  top: 10px;
  color: #999;
}
/* 隐藏实际输入框 */
input[type="text"] {
  display: none;
}

将<span>元素的position属性设置为absolute，可以将其从文档流中取出，并有选择地放置在<label>元素的指定位置。left和top属性用于设置<span>元素的偏移量。color属性用于设置文本颜色。

将<input>元素的display属性设置为none，可以将其隐藏，只允许用户在<label>元素中已定义的区域中输入内容。

使用jQuery为占位符添加交互效果：

$('label').on('click', function() {
  $(this).find('span').hide();
  $(this).find('input').show().focus();
});
$('input').on('blur', function() {
  if (!$(this).val()) {
    $(this).hide();
    $(this).prev('span').show();
  }
});

为<label>元素添加一个click事件处理程序，当用户点击占位符时，隐藏<span>元素，显示<input>元素，并设置它为焦点。

为<input>元素添加一个blur事件处理程序，当用户离开输入框时，如果输入框中没有内容，则隐藏它自己，显示<span>元素，以便重新显示占位符。

下面是使用一个完整的示例演示如何创建一个占位符输入：

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
  <script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
  <script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
  <style>
    /* 显示占位符文本 */
    .placeholder {
      position: absolute;
      left: 10px;
      top: 10px;
      color: #999;
    }
    /* 隐藏实际输入框 */
    input[type="text"] {
      display: none;
    }
  </style>
  <script>
    $('label').on('click', function() {
      $(this).find('span').hide();
      $(this).find('input').show().focus();
    });
    $('input').on('blur', function() {
      if (!$(this).val()) {
        $(this).hide();
        $(this).prev('span').show();
      }
    });
  </script>
</head>

<body>
  <div data-role="page">
    <div data-role="header">
      <h1>占位符输入示例</h1>
    </div>
    <div data-role="content">
      <form>
        <div>
          <label for="username">
            <span class="placeholder">Username</span>
            <input type="text" name="username" id="username">
          </label>
        </div>
        <div>
          <label for="password">
            <span class="placeholder">Password</span>
            <input type="password" name="password" id="password">
          </label>
        </div>
      </form>
    </div>
  </div>
</body>

</html>

在这个示例中，我们创建了一个包含两个占位符输入的表单。一个用于输入用户名，一个用于输入密码。用户单击占位符时，将自动为其聚焦到相应的输入框中。如果用户离开输入框并没有输入任何内容，则自动重新显示相应的占位符文本。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：如何使用jQuery Mobile创建一个占位符输入 - Python技术站