We Keep Coding

How do I highlight new text within a input field in html

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;
}

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.

Restrict selection between paragraph

I´m working in a web application using angular, one of the sections is document section where the user is gonna be able to select the text and highlight the text, i´m using window.getSelection() to extract the selected text and appended in to a <mark> tag to highlight the text, but one of the requirements is that the is user is not gonna be able to select text between paragraphs for example:
In the image there is a selection between paragraph is there any way to avoid this, or stop the selection when the user jump from one paragraph another.

Ok i found small hack of how to do it, i attach some properties to the paragraph tag here i put the code.
<p oncut="return false" onpaste="return false"
onkeydown="if(event.metaKey) return true; return false;" contenteditable="true"
spellcheck="false" autocorrect="off">Text</p>
Using this the selection is not possible to select between elements.

Maybe you could calculate a substring before attaching it to the mark.
Using a regex like /\r?\n/ or something similar to keep only the first chunk of the copied text in both *NIX and Windows systems (user-agnostic, to some extent).

How to display a generic text inside a text box

I have a textarea/textbox which dynamically gets url from the database. Right now the textbox is showing full url address and does not look good. What I was trying to get is use some generic text like "click here for more info". I tried placeholder but does not work. I need to use generic text and when link go to the link it gets from database. Any help will be highly appreciated.
//just for test
//this text area is getting values from db(url)
<a id="aurl" target="_blank" > <textarea id="evnt"
type="text" name="event" cols="40" disabled></textarea></a>

I don't think it makes any sense to wrap a <textarea> element in an <a> anchor tag. A textarea is expecting user input, where as an anchor tag is for linking you to somewhere else. Could just use a normal hyperlink as below?
click here for more info

How to insert tags inside a input or textarea in html

I am going to design a textarea for writing some formula. Since typing entire formula may cause mistake in formula, I think its is better that users drag and drop variables from another panel. I believe that stackoverflow's tag option could be usefull for this purpose.
How it is possible to design a text area like this?

You cannot directly convert the text box into tag. But you can make it look like a text box by giving a container to have the tag inside and a text box.
<div id="container"><span id="tagContainer"></span>
<input type="text" id="inputText" placeholder="input here.." />
</div>
Using keypress event, you can grab the value of textbox and append it into tagContainer. You can see the implementation here: JSFiddle

You can't.
However you can put another text block with highlight content at same position with that textarea or input.
Reference:
Visit https://codepen.io/lonekorean/pen/gaLEMR

This plugin might be helpful for you. http://aehlke.github.io/tag-it/

How to move placeholder text along with the content of a textbox in HTML?

Suppose this is my textbox:
<input type="text" placeholder="%" />
And a user is supposed to enter a percentage inside, but without the % sign, only the numbers (e.g. 67 in 67%). But I want them to still remember that this is a text box in which you insert a percentage.
So how can I move the placeholder along with the text, make it unable to be deleted, always after the text?
And I do remember seeing it somewhere too, unless I got my facts wrong.

A way to do this would be to have an additional element overlaying the input element and moving the overlayed element as the user types.
But, I think a better UX experience would be to have the element as an add-on appended to the input field, as show in twitter bootstrap. See the "extending form controls" settings:
http://twitter.github.com/bootstrap/base-css.html#forms

You could simulate an input and change the width of the real input using javascript. (The trick is to use some invisible element to catch the needed width)
Exemple using JQuery: http://jsfiddle.net/Vu7hN/
$input.on('change keypress paste focus textInput input', function(){
testWidth.text($input.val());
$input.width(testWidth.width());
});