Question

我想设计一个文本输入控件，自动将匹配任意模式的文本转换为“标记”，然后允许用户与这些标记进行交互，就好像它们是文本字形一样。

换句话说，一旦创建了这些令牌，用户可以单击它们来选择它们，或者拖动它们以选择多个令牌。按下箭头键时文本光标应在它们之间移动（而不是在它们内部的每个字母之间），按shift键应该一次选择一个标记，就像选择后续字母一样。

从我的研究来看，似乎目前还没有办法只使用HTML和CSS。 CSS中的user-select允许您一次选择元素中的所有文本，但不能选择元素本身。我希望能够使用类似::selection.token { border: 1px solid blue }的内容来更改内联块元素本身的外观。

此类功能存在于本机应用程序中（Apple Numbers中的功能，Microsoft Outlook或Apple Mail中的电子邮件地址......）但我不知道我是否曾在Web应用程序中看到它。

之前有没有人解决过这个问题，或做过类似的事情？
编辑：自从写这篇文章以来，我发现了一些jQuery / AngularJS插件，它们接近我正在寻找的功能。 Tokchi是我遇到过的最好的一个。（遗憾的是，没有在线演示，所以你必须下载插件来查看演示。）然而，即使这个插件也没有我想要创建的那种选择行为;选择一个标记会选择其中的所有文本，而不是标记本身。

Answer 1

TAG EDITOR PLUGIN PAGE

这是我见过的最通用的标签编辑器插件，直到现在这个插件允许您输入标签并编辑它们并浏览它们。根据您的意见，我认为您正在寻找的是什么。他们可以被拖动和更多功能，如可排序等

概述和功能

根据MIT许可证发布。来自Github（changelog）的来源。兼容Firefox，Safari，Chrome，Opera，Internet Explorer 8+中的jQuery 1.7.0+。 IE7在技术上有效，但没有关注CSS /布局错误。 tagEditor依赖于accursoft的插入符号插件（1.1 kB缩小）。

轻量级：8.5 kB的JavaScript - 小于3.2 kB的gzip压缩编辑就地标记使用光标键，Tab，Shift + Tab，Enter，Pos1，End，Backspace，Del和ESC在标签之间进行直观导航可选的jQuery UI可排序可选的jQuery UI自动完成复制粘贴或删除多个选定的标签重复标签检查自定义分隔符占位符错误标签的自定义样式公共方法用于读取，添加和删除标签+销毁功能回调允许tabindex进行表单导航如果禁用JavaScript，则会优雅地降级这个插件是由DEV.com开发的 - 一个免费的Public Domain图像的国际存储库。我们已经在生产中实现了这个软件，并且我们本着这个软件的精神 - 与其他人一起自由地分享它。

USAGE

在HTML文档的部分中包含样式表jquery.tag-editor.css，并在加载jQuery和可选的jQuery UI可排序/自动完成后包含JavaScript文件jquery.tag-editor.min.js。确保还加载accursoft的插入符插件（1.1 kB缩小）。 tagEditor接受来自键/值对的对象的设置，并可以分配给任何文本输入字段或textarea。

$(selector).tagEditor({key1: value1, key2: value2});

// examples

// assign tag editor to textarea - existing text will be used as initial tags
$('textarea').tagEditor();

// assign tag editor to text input with initial tags
$('input[type="text"]').tagEditor({ initialTags: ['tag1', 'tag2', 'tag3'] });

// use jQuery UI autocomplete
$('#my_textarea').tagEditor({ autocomplete: { 'source': '/url/', minLength: 3 } });

允许用户选择整个元素

1 个答案:

概述和功能

USAGE