Format parts of input field text

Question

I'm working on a Web-GUI for a semantic search with a single text-input as a search-box. Typical queries are: "buildings higher than 100 meters".

I want to format the input text as the server answers the question. The entities and operators should be colored to make it easier for the user to see what the computer understood.

Example:

I found thousands of hacks out there to accomplish this, but all of them were really awkward to some degree. I still want it to feel like a text-field. I want the user to be able to move the cursor by clicking and using the key-arrows. While querying the server, the text should of course be black only. The coloring comes from the servers interpretation and ususally is available "as-you-type" (few milliseconds answer-time).

I want this thread to be a discussion of the different possibilities of accomplishing this task and find the best general-purpose solution for everybody.

Deepak Biswal · Accepted Answer · 2015-11-10 10:41:18Z

1

Perhaps a possible solution would be for you to use an editable div, like below:

<div contentEditable="true">
    Lorem <b>ipsum</b> dolor
</div>

This way you can able to style user input as user type in (may be on keyUp event). While you submit this value in a form, you'll have to use JavaScript to get the innerHTML of this div and assign it to a hidden input or something.

answered Nov 10, 2015 at 10:41

Deepak Biswal

4,3302 gold badges22 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user2033412 Over a year ago

Nice idea -- but how would I add the format without replacing the cursors position?

Deepak Biswal Over a year ago

Something like this will do the trick, but you need put a lot effort to complete your full functionality.

Collectives™ on Stack Overflow

Format parts of input field text

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related