javascript - 动态增长文本输入数组 (HTML/JavaScript)

标签 javascript jquery ajax user-interface

我正在为一些内部资料创建一个数据输入应用。

我的团队需要输入有关“项目”的信息,这些信息可以有很多“类别”,反之亦然。

我需要一种快速的方法让他们输入任意数量的类别。

这是我的想法:

在项目条目页面上,我将拥有它,以便最初有一个“类别”的文本输入,如果它在它为空时被选中,则输入字段将被删除(除非它是唯一的)并跳过焦点到下一个领域。如果它在从 中跳出时为空,并且如果它是数组中的最后一个输入字段,则将添加一个额外的“类别”文本输入并获得焦点。

通过这种方式,人们可以非常快速地输入任意数量的类别,而无需将手从键盘上移开,只需键入并按 Tab 即可。然后按两次 Tab 键表示列表结束。

首先,你觉得这个界面怎么样?有更好的方法吗?

其次,是否有 jQuery(或其他)插件可以执行此操作?我已经搜索过,但找不到。我也搜索了 scriptaculous/prototype 和 mootools,但没有成功。

我显然宁愿使用经过试验和测试的东西,也不愿自己动手。

感谢任何和所有的建议

最佳答案

首先,我将尝试解决在 nickf 解决方案上评论的问题。

将焦点设置在新创建的输入上 $copy.find(":text").focus();不管用。 jQuery focus 方法只触发事件,并不调用底层的focus 方法。

您可以使用 setTimeout(function(){$copy.find(":text").get(0).focus()}, 10); 设置焦点但是:

  • 在 firefox 中需要设置超时,否则闪烁的光标会发生奇怪的事情。

  • 在 tab 键时,IE7 需要另一个输入来聚焦。如果焦点转到地址栏,我还没有找到将焦点设置在输入上的方法。我想这不会成为问题,因为您至少需要一个提交按钮。

为了控制 shift-tab 我一直在尝试跟踪聚焦元素,以便在聚焦元素是先前输入时跳过 blurHandler,但是生成的代码真的很难看所以我会发布这个并寻找更好的解决方案。

最后,您问我们对这个 UI 的看法,我认为逗号分隔的类别列表更容易编码和填写。:-)

关于javascript - 动态增长文本输入数组 (HTML/JavaScript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/280109/

相关文章:

javascript - 在antd 4中将初始值设置为动态形式

javascript - 按回车键触发 JavaScript,无需刷新网页即可实现多个搜索/AJAX 查询/数据表显示

php - Ajax 请求卡住网页

java - struts2中如何使用Ajax上传Imagefile

javascript - 我的谷歌地图路径符号不居中

javascript - 如何显示选定的div并隐藏其他兄弟div?

javascript - this.method 不适用于 setInterval

javascript - 防止鼠标中键单击滚动

JQuery:.val() 不适用于文本区域

javascript - 第一个嵌套 html 元素的 cheerio 选择器