在文本字段中启用上/下箭头历史记录 jQuery Recall.js

  • 源码大小:8.42KB
  • 所需积分:1积分
  • 源码编号:19JP-3534
  • 浏览次数:270次
  • 最后更新:2023年06月23日
  • 所属栏目:表单
本站默认解压密码:19jp.com 或 19jp_com

简介

对于命令行界面的用户来说,最常用的功能之一是它们的历史记录。它允许用户使用向上和向下箭头循环浏览以前键入的所有命令。

当涉及到web开发时,一些开发人员希望允许用户在文本字段(如输入和文本区域元素)中重复使用以前输入或预定义的值。这个jQuery插件通过允许用户使用向上和向下键访问这些值来解决这个问题。享受

键盘交互:

  • 向上/向下:调用以前的匹配条目
  • 紧急停车场:清除输入
  • 控制-x:清晰的历史,
  • 中心-d:转储到控制台

如何使用它:

1.导入jQuery库和Recall.js插件。

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.recall.js"></script>

2.在目标文本字段上初始化插件并完成。

$(function(){
  $("input, textarea").recall();
});

3.使用另一个文本字段中的历史记录。

<input id="input1" />
<input id="input2" />
$("#input2").recall({
  link: "#input1",
});

4.设置初始数据(仅当没有保存的历史记录时)。

$("input").recall({
  initData: "jQuery,Script,Net".split(","),
});

5.将更多数据附加到历史记录中。

var data = "jQuery,Script,Net".split(",");
$("input").recall({
  data: data,
});

6.启用/禁用工具提示。默认值:false。

$("input").recall({
  tooltip: true,
  tooltipText: "Use up/down key to access history",
});

7.清除所有历史记录。

$("input").recall({
  clear: true
});

8.向历史记录中添加更多数据。

$("#in1").recall({
  add: ["aa", "bb", "cc", "dd", "ee"],
});

9.更多配置。

$("input").recall({

  // case sensitive?
  matchCase: false,

  // match any characters, not just at the beginning of the strings
  matchAny: false,

  // cycle through all history
  matchAll: false,
  
});

预览截图