HTML | DOM Textarea 自动完成属性(1)

📌 相关文章

📜 HTML | DOM Textarea 自动完成属性(1)

📅 最后修改于: 2023-12-03 14:41:48.870000 🧑 作者: Mango

HTML | DOM Textarea 自动完成属性

在HTML中，我们可以使用元素来创建一个多行文本输入框，而在DOM中，则还提供了许多与<textarea>元素相关的属性，其中包括自动完成属性。在本篇文章中，我们将为大家介绍HTML和DOM中的Textarea自动完成属性及其用法。

HTML中的Textarea自动完成属性

HTML5中的自动完成功能

在HTML5中，我们可以使用自动完成属性来为元素指定自动完成类型。以下是textarea自动完成属性列表：

autocomplete: 定义是否启用自动完成功能，并指定自动完成类型。
autofocus: 定义文本框是否应该在页面加载时自动获得焦点。
cols: 定义元素中可见的字符数。
dirName: 定义文本区域中输入的文本的布局方向的名称。
disabled: 定义元素是否禁用。
form: 定义元素所属的表单。
maxlength: 定义元素的最大字符数。
name: 定义元素的名称。
placeholder: 定义元素的占位符文本。
readOnly: 定义元素是否只读。
required: 定义元素是否必填。
rows: 定义元素中可见的行数。
wrap: 定义元素中文本如何包装。

我们可以使用以下示例代码来为元素指定自动完成类型：

<label for="favfruit">选择你喜欢的水果:</label>
<textarea id="favfruit" name="favfruit" autocomplete="on"></textarea>

jQuery UI Autocomplete插件

除了HTML5提供的自动完成属性外，我们还可以使用第三方插件实现自动完成功能。其中，jQuery UI Autocomplete是一个流行的自动完成插件，它可以自动将用户键入的字符与预定义的值进行匹配，并根据匹配结果生成下拉框列表。

我们可以使用以下示例代码来演示如何使用jQuery UI Autocomplete插件实现自动完成功能：

<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery UI Autocomplete示例</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</head>
<body>
  <label for="fruit">输入一个水果: </label>
  <textarea id="fruit"></textarea>

  <script>
    $(function() {
      var availableFruit = [
        "苹果",
        "香蕉",
        "菠萝",
        "橙子",
        "西瓜",
        "芒果",
        "葡萄",
        "猕猴桃",
        "柚子",
        "草莓"
      ];
      $("#fruit").autocomplete({
        source: availableFruit
      });
    });
  </script>
</body>
</html>

DOM中的Textarea自动完成属性

在DOM中，我们可以使用Element对象的.setAttribute()方法来为元素指定自动完成类型。以下是使用DOM设置自动完成属性的示例代码：

<label for="favfruit">选择你喜欢的水果:</label>
<textarea id="favfruit" name="favfruit"></textarea>
<script>
var fruitList = ["苹果", "香蕉", "菠萝", "橙子", "西瓜"];
document.getElementById("favfruit").setAttribute("autocomplete", "list-of-fruit");
document.getElementById("favfruit").setAttribute("list", "fruitlist");
var datalist = document.createElement("datalist");
datalist.setAttribute("id", "fruitlist");
document.body.appendChild(datalist);
for(var i=0;i<fruitList.length;i++){
    var option = document.createElement("option");
    option.setAttribute("value",fruitList[i]);
    datalist.appendChild(option);
}
</script>

其中，我们使用了"list-of-fruit"作为自动完成类型，使用setAttribute()方法为元素设置了"autocomplete"和"list"属性，并为"Datalist"元素设置了id属性。接下来，我们创建了一个名为"fruitList"的数组，用于存储需要预定义的水果名称，并使用循环语句将数组中的水果名称动态添加到"Datalist"元素中，从而实现了自动完成功能。

总结

本文为大家介绍了HTML和DOM中的Textarea自动完成属性及其用法，其中涉及到了HTML5自动完成属性、jQuery UI Autocomplete插件和使用DOM设置自动完成属性的代码示例，希望本文能够帮助到需要的开发者们。