1

Within Servicenow portals I am trying to create a input text field that has a few requirements when the user tries to make changes to the text. Within the form if the user wants to change the text that has already been added the new input text will have to be highlighted. Only the new changes can be highlighted. The previous text will stay the same without any highlights. I have looked into the html tag but that highlights the entire text field and also tried using a 'focus' within the css tag name.

HTML:

<input type="text" value={{data.text2}}>

CSS: input:focus::first-line { background-color: #fff2ac; }

Essa Ayoobi
  • 11
  • 1
  • There is no way to add color to text in a standard input. Solutions will be to do something else besides an input. – epascarello Mar 11 '21 at 20:32
  • This is not true ... well, on some level it *is* true: you literally can't highlight the text inside an input, in the way the OP desires. BUT, you *can* use other elements, positioned on top of the input, to get the same visual effect, and it won't matter to the user whether it's all happening in a single `input`, or whether other elements are involved. As I noted in my answer, there already is a "proof of concept", in the form of a jQuery plugin. – machineghost Mar 11 '21 at 20:35

1 Answers1

0

You could use Javascript to position a dynamically generated span with the highlighting, on top of the input ... and then update that span's text whenever the underlying input changes.

See the last option in the top answer here for more details: How to highlight text inside an input field?.

It even mentions a jQuery plug-in with this effect that you could use, or examine the source of: https://github.com/garysieling/jquery-highlighttextarea.

machineghost
  • 33,529
  • 30
  • 159
  • 234