Nate Green Nate Green - 6 months ago 21
HTML Question

Allow users to select an entire element

I'd like to design for a text input control that automatically converts text matching an arbitrary pattern into "tokens," and then allows users to interact with those tokens as if they were text glyphs.

In other words, once those tokens are created, users can click them to select them, or drag over them to select more than one. The text cursor should move between them when the arrow keys are pressed (not between each letter inside of them) and pressing shift-arrow should select one token at a time, the same way it selects subsequent letters.

It seems like, from my research, there isn't currently a way to do this with HTML and CSS only.

user-select
in CSS lets you select all the text within an element at once, but not the element itself. I'd like to be able to use something like
::selection.token { border: 1px solid blue }
to change the appearance of the inline-block element itself when it is selected.

This kind of functionality exists in native applications (functions in Apple Numbers, email addresses in Microsoft Outlook or Apple Mail...) but I don't know if I've ever seen it in a web application.

Has anyone solved this problem before, or done something similar?




EDIT: Since writing this, I've discovered a few jQuery/AngularJS plugins that get close to the functionality I'm looking for. Tokchi is the best one I've come across. (No online demo, unfortunately, so you'll have to download the plugin to check out the demo.) However, even this plugin doesn't have the kind of selection behavior I'm looking to create; selecting a token selects all the text within it, not the token itself.

Answer

TAG EDITOR PLUGIN PAGE

This is the most versatile tag editor plugin that I have encountered till now this plugin allows you to enter tags and also edit them and navigate through them .Which I think is what you are looking for based on your comments .And they can be dragged around and many more features like sortable etc

Overview and Features

Released under the MIT License. Source on Github (changelog). Compatible with jQuery 1.7.0+ in Firefox, Safari, Chrome, Opera, Internet Explorer 8+. IE7 technically works, but no care has gone into CSS/layout bugs. tagEditor depends on accursoft's caret plugin (1.1 kB minified).

Lightweight: 8.5 kB of JavaScript - less than 3.2 kB gzipped Edit in place tags Intuitive navigation between tags with cursor keys, Tab, Shift+Tab, Enter, Pos1, End, Backspace, Del, and ESC Optional jQuery UI sortable Optional jQuery UI autocomplete Copy-paste or delete multiple selected tags Duplicate tags check Custom delimiter/s Placeholder Custom style for faulty tags Public methods for reading, adding and removing tags + destroy function Callbacks Allows tabindex for form navigation Graceful degradation if JavaScript is disabled This plugin was developed by and for Pixabay.com - an international repository for free Public Domain images. We have implemented this piece of software in production and we share it - in the spirit of Pixabay - freely with others.

USAGE

Include the stylesheet jquery.tag-editor.css in the section of your HTML document - and the JavaScript file jquery.tag-editor.min.js after loading jQuery and optional jQuery UI sortable/autocomplete. Make sure to also load accursoft's caret plugin (1.1 kB minified). tagEditor accepts settings from an object of key/value pairs, and can be assigned to any text input field or 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 } });