jQuery Mobile Textinput Widget 完整参考

介绍

jQuery Mobile Textinput Widget 是 jQuery Mobile UI Library 的一部分，用于创建具有各种文本输入选项的表单控件。它提供了易于实现的文本输入控件，包括单行，多行，日期选择器，时间选择器等。

使用方法

必需的文件

使用 Textinput Widget 首先需要引入 jQuery Mobile 的 CSS/JS 文件，如下：

<!-- jQuery Mobile CSS -->
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">

<!-- jQuery Mobile JS -->
<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>

基础用法

定义一个文本输入框只需要一个 <input> 标签，同时其 type 属性为 "text"，如下所示：

<label for="basic">Text Input:</label>
<input type="text" name="basic" id="basic" value="">

单行文本输入

使用 "text" 类型的 <input> 标签可实现一个单行文本输入：

<label for="single-line">Single line text input:</label>
<input type="text" name="single-line" id="single-line" value="">

多行文本输入

使用 "textarea" 类型的标签可实现一个多行文本输入框：

<label for="multiple-lines">Multiple lines text input:</label>
<textarea cols="30" rows="5" name="multiple-lines" id="multiple-lines"></textarea>

禁用

若需要一个禁用状态的文本输入框，只需在 <input> 或 <textarea> 标签上添加 disabled 属性即可：

<label for="disabled-input">Disabled input:</label>
<input type="text" name="disabled-input" id="disabled-input" value="" disabled>

<label for="disabled-textarea">Disabled textarea:</label>
<textarea cols="30" rows="5" name="disabled-textarea" id="disabled-textarea" disabled></textarea>

自动聚焦

若需要初始化时自动聚焦到一个输入框，则可以在 <input> 或 <textarea> 标签上添加 autofocus 属性：

<label for="auto-focus-input">Auto focused input:</label>
<input type="text" name="auto-focus-input" id="auto-focus-input" value="" autofocus>

<label for="auto-focus-textarea">Auto focused textarea:</label>
<textarea cols="30" rows="5" name="auto-focus-textarea" id="auto-focus-textarea" autofocus></textarea>

事件

可以通过注册事件来处理输入框的变化，如下所示：

$(document).on("change keyup paste", "#basic", function() {
  alert("Textinput value is: " + $(this).val());
});

文本输入类型

可以使用不同的 input 类型来指定特定类型的文本输入框，如电话号码，邮编，电子邮件等等。给定的输入类型将自动验证输入框的值。例如：

<label for="phone">Phone number:</label>
<input type="tel" name="phone" id="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" maxlength="12" value="">

<label for="zip">ZIP code:</label>
<input type="text" name="zip" id="zip" pattern="[0-9]{5}" maxlength="5" value="">

<label for="email">Email address:</label>
<input type="email" name="email" id="email" value="">

日期选择器

使用 "date" 类型的 <input> 标签来创建一个日期选择器：

<label for="date">Date:</label>
<input type="date" name="date" id="date" value="">

时间选择器

使用 "time" 类型的 <input> 标签来创建一个时间选择器：

<label for="time">Time:</label>
<input type="time" name="time" id="time" value="">

总结

Textinput Widget 是 jQuery Mobile UI Library 的一部分，用于创建具有各种文本输入选项的表单控件。在文本输入方面，它提供了易于实现的文本输入控件，包括单行，多行，日期选择器，时间选择器等。我们通过本文介绍了 Textinput Widget 的基础用法和一些扩展功能，旨在为您提供更全面的了解和使用 Textinput Widget 的能力。