1

I am trying to apply a style to particular words or phrases in a text input field, I've seen it done in a similar way in the 'Facebook mentions'.

Ideally I want to run some regexp to find any text within a textbox which is between two square brackets and then apply a background colour to this word and only this word.

I have started by overlaying a DIV over the top of the text box, but I am having issues maintaining the alignment, any help would be much appreciated!

Many Thanks, Marcus

user2895001
  • 56
  • 4

2 Answers2

2

You cannot style parts of the text in an input control differently from the other text there, simply because it’s plain text and no markup can be inserted.

Instead of trying contrived ways of fake styling like superimposed elements, just use an editable div (or other element that allows content), using the contenteditable attribute. This will create some problems (user actions may introduce markup into the content) as well as many new possibilities.

Jukka K. Korpela
  • 195,524
  • 37
  • 270
  • 390
  • This has more details: http://stackoverflow.com/questions/17341670/change-color-of-one-character-in-a-text-box-html-css – msanjay Aug 22 '14 at 02:45
-1

hi there is a jquery plugin that does the trick.

http://bartaz.github.io/sandbox.js/jquery.highlight.html

kasper Taeymans
  • 6,950
  • 5
  • 32
  • 51
  • 2
    That's a nice plugin, but then it works for the HTML content general, and not for a text input field as asked by the OP. See its documentation: How does it work: Highlight plugin searches through the text of given elements...When the term is found it's simply wrapped with a element. So we can't have a span inside a text input field. – msanjay Aug 22 '14 at 02:42