Input box that allows rich text features

Question

I am looking for advice what component should I use for my needs that are as follows:

I want simple single-line edit box that allows user to enter text and when this edit component has focus, all text should be formatted same way (one font, one color,...)

But when the input component lose its focus, I want to "process" its text and (if apply), some part(s) of that text to display in different formating (let's say a gray color instead of standard black).

Is there some existing component to reach such target, or is there some simple code/solution to get such behavior?

I don't think there's something similar but you can play with :focus and CSS — Aurelio De Rosa, Jun 30 '13 at 15:34
@claustrofob: don't see other choice, but OP will have to use JS/jQuery to get a single-line constraint — OzrenTkalcecKrznaric, Jun 30 '13 at 15:37

score 1 · Answer 1 · edited May 23 '17 at 12:28

1

As you can't format the text inside an input element, you need to achieve with div element. Take an editable div as following

<div contenteditable="true"></div>

Now add an onblur event to it as described on following thread. Call a method on onblur for formatting

Is it possible to write onFocus/lostFocus handler for a DIV using JS or jQuery?

edited May 23 '17 at 12:28

Community

1
1

answered Jun 30 '13 at 16:16

Hari Das

10,145
7
62
59

score 0 · Answer 2 · answered Jun 30 '13 at 15:42

You can't style a substring of an input's value. If this is imperative, you'd need to make a custom element that matches the styling of the input box, which would be very challenging (to put it mildly) to match across browsers, and in processing the string, set a span element to wrap the relevant substring. To simplify this, you could use the HTML5 contenteditable attribute. You'd still have to handle the styling of the text in the editable element, but the browser would handle the input swapping stuff.

The simpler solution is to use the :valid and :invalid pseudo-selectors. You can combine these with the :focus pseudo-selector to provide non-validated styling during editing. Off the top of my head, something like this:

input.targetClass:invalid {
    background-color: #FDD;
    color: #B66;
}
input.targetClass:invalid:focus {
    background-color:auto;
    color: #000;
}

Hope it helps.

Input box that allows rich text features

2 Answers2