jQuery Mobile 表单输入元素（Form Input Elements）详解
表单输入元素 是 jQuery Mobile 的 核心交互组件，自动增强原生 <input>、<select>、<textarea>，提供 触控优化、圆角、清除按钮、图标、占位符 等移动端特性。
无需 JS，只需 HTML + data-* 属性！
1. 基本输入元素类型
| 类型 | HTML 写法 | jQM 增强效果 |
|---|
| 文本 | <input type="text"> | 圆角输入框 |
| 密码 | <input type="password"> | ●●● |
| 搜索框 | <input type="search"> | 带 清除按钮 |
| 邮箱 | <input type="email"> | 调起 @ 键盘 |
| 电话 | <input type="tel"> | 数字键盘 |
| 数字 | <input type="number"> | 带上下箭头 |
| 日期 | <input type="date"> | 原生日期选择器 |
| 滑块 | <input type="range"> | 拖动条 |
| 文本域 | <textarea> | 多行输入 |
2. 核心属性（data-*）
| 属性 | 值 | 说明 |
|---|
data-clear-btn="true" | true/false | 清除按钮（×） |
placeholder="文字" | — | 输入提示 |
data-mini="true" | — | 小号输入框 |
data-inline="true" | — | 内联显示 |
data-icon="search" | 图标名 | 输入框右侧图标 |
3. 完整示例（可直接运行）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQM 输入元素</title>
<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>
<body>
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1>输入元素大全</h1>
</div>
<div data-role="main" class="ui-content">
<form>
<!-- 1. 文本输入 + 清除按钮 -->
<div class="ui-field-contain">
<label for="name">姓名：</label>
<input type="text" name="name" id="name"
placeholder="请输入姓名"
data-clear-btn="true">
</div>
<!-- 2. 搜索框（推荐） -->
<div class="ui-field-contain">
<label for="search">搜索：</label>
<input type="search" name="search" id="search"
placeholder="输入关键词..."
data-clear-btn="true">
</div>
<!-- 3. 密码输入 -->
<div class="ui-field-contain">
<label for="pass">密码：</label>
<input type="password" name="pass" id="pass"
placeholder="6-12位"
data-clear-btn="true">
</div>
<!-- 4. 邮箱 + 电话 -->
<div class="ui-field-contain">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email"
placeholder="example@be.com"
data-clear-btn="true">
</div>
<div class="ui-field-contain">
<label for="tel">电话：</label>
<input type="tel" name="tel" id="tel"
placeholder="+32 123 456 789"
data-clear-btn="true">
</div>
<!-- 5. 数字 + 日期 -->
<div class="ui-field-contain">
<label for="age">年龄：</label>
<input type="number" name="age" id="age"
min="18" max="100" value="25">
</div>
<div class="ui-field-contain">
<label for="birth">生日：</label>
<input type="date" name="birth" id="birth">
</div>
<!-- 6. 滑块（Range） -->
<div class="ui-field-contain">
<label for="volume">音量：<span id="vol-val">50</span>%</label>
<input type="range" name="volume" id="volume"
min="0" max="100" value="50" data-show-value="true">
</div>
<!-- 7. 文本域（Textarea） -->
<div class="ui-field-contain">
<label for="note">备注：</label>
<textarea name="note" id="note"
placeholder="选填，多行输入..."
data-clear-btn="true"></textarea>
</div>
<!-- 8. 小号输入框 -->
<div class="ui-field-contain">
<label for="code">验证码：</label>
<input type="text" name="code" id="code"
placeholder="123456"
data-mini="true"
data-clear-btn="true">
</div>
<!-- 9. 带图标输入框 -->
<div class="ui-field-contain">
<label for="user">用户名：</label>
<input type="text" name="user" id="user"
placeholder="带图标"
data-icon="user">
</div>
<!-- 10. 提交按钮 -->
<button type="submit" class="ui-btn ui-btn-b ui-corner-all ui-shadow">
提交
</button>
</form>
<!-- 11. 当前用户信息 -->
<div style="margin-top:30px; padding:15px; background:#f0f8ff; border-radius:8px;">
<h4>用户实时信息</h4>
<p><strong>时间：</strong>2025年11月17日 03:09（CET）</p>
<p><strong>国家：</strong>比利时 (BE)</p>
</div>
</div>
<div data-role="footer" data-position="fixed">
<h4>比利时 © 2025</h4>
</div>
</div>
<!-- 滑块实时显示值 -->
<script>
$(document).on("pagecreate", function() {
$("#volume").on("change", function() {
$("#vol-val").text($(this).val());
});
});
</script>
</body>
</html>
4. 输入元素属性速查
| 属性 | 常用值 | 说明 |
|---|
type | text, search, email, tel, number, date, range | 输入类型 |
data-clear-btn="true" | — | 清除按钮 |
placeholder | 文字 | 占位提示 |
data-mini="true" | — | 小号 |
data-icon="search" | search, user, mail 等 | 右侧图标 |
data-show-value="true" | — | 滑块显示数值 |
5. 最佳实践
| 建议 | 说明 |
|---|
搜索框用 type="search" | 自动带清除按钮 |
必填项加 required | 浏览器验证 |
电话/邮箱用对应 type | 调起正确键盘 |
| 滑块加实时显示 | 用 JS 更新 label |
用 ui-field-contain 包裹 | label 和 input 自动对齐 |
<div class="ui-field-contain">
<label for="id">标签：</label>
<input type="text" id="id">
</div>
6. 常见问题
| 问题 | 解决方案 |
|---|
| 清除按钮不显示 | 必须 data-clear-btn="true" 或 type="search" |
| 键盘挡住输入框 | jQM 自动处理（iOS 需 data-position="inline"） |
| 滑块无数值 | 加 data-show-value="true" |
| 图标错位 | 确保 data-icon 正确 |
7. 推荐输入模板
<!-- 标准文本输入 -->
<div class="ui-field-contain">
<label for="username">用户名：</label>
<input type="text" id="username" placeholder="请输入" data-clear-btn="true">
</div>
<!-- 搜索框 -->
<input type="search" placeholder="搜索..." data-clear-btn="true">
<!-- 滑块带值 -->
<label>亮度：<span id="val">50</span>%</label>
<input type="range" id="brightness" min="0" max="100" value="50">
总结：输入类型选择指南
| 场景 | 推荐 type |
|---|
| 普通文字 | text |
| 搜索 | search |
| 邮箱 | email |
| 电话 | tel |
| 数字 | number |
| 日期 | date |
| 调节值 | range |
| 多行 | <textarea> |
需要我为你生成：
- 带实时验证的输入（正则）？
- 自动完成输入框（datalist）？
- 语音输入 + 扫码按钮？
随时告诉我！
