CODEWITHSUNDEEP
javascriptjqueryhtml
Ωmega
Ωmega

Reputation: 43673

Input box that allows rich text features

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?

Upvotes: 2

Views: 1855

Answers (2)

Hari Das
Hari Das

Reputation: 10864

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?

Upvotes: 1

jxpx777
jxpx777

Reputation: 3641

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.

Upvotes: 0

Related Questions