HTML input text in 2 colors - javascript

I want to show some text in red color and the remaining in black inside one html textbox after the on change event or mouse leave event.
Is this possible? if yes how?

I don't think you can achieve specifically what you're asking for. You can apply CSS to the default value of a text box, but to change the colour of only some of the words within it would require you to use a <span>, which you can't within a text box value (i.e. you can type <span>, of course, but not apply CSS to it).
If you're happy to have the text within some other element as you imply in a later comment, then that's perfectly doable with very simple CSS using spans within <p> or <div> elements, as evidenced in the below jsFiddle:
http://jsfiddle.net/2DpSX/

Finally I could do this by creating a editable <div>
http://jsfiddle.net/EP2dc/
Thanx everyone for the guidance.

Related

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.

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/

Formatting buttons for contentEditable reflect selection formatting

We have a contenteditable="true" div which we use as a wysiwyg text editor. We added a basic formatting toolbar similar to the one that uses Medium.com
Using execCommand(), we're able to make the selected text bold if, for instance, the user presses the bold button. This works great.
However, something we haven't managed to do yet is to make the bold button highlighted if the user selects a part of the text which is in bold, like illustrated in the picture above. This could be easily done by passing a is-active class on the button of course, but how do we know that the selected text is, in this case, bold?
We think it could perhaps be done using the Selection API but this use case seems undocumented.
since the execCommand() use html tag wrappers like B tag for bold .
So when you are selecting the word i am sure you are using some sort of js to show that formating tollbar just add some more code in that function like this.
if(selectedElement.nodeName == "B"){
toolbarBoldButton.classlist.add("is-active");
}
Note: i am using js function "nodeName" to get the tag name which was wrapped around the execCommand() in this case bold/B then matching if it matches the tag and if true i am adding the is-active class to the toolbars Bold style element.

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

Jquery: set style part of text in input text

I want to create some text based on user input, and when user enter some text, the first word will automatically set backgroundcolor, but the other words still remain same (no background color), can I do this ?
Thanks
WYSIWYG editor will be the best choice for previewing text and editing at the same time.
Some popular ones are
TinyMCE
STEditor
FCKeditor
You could do it with an iFrame if you turn designMode on, add an event listener for keypress then wrap the first word in the iFrames body with <span style='background-color: red'></span>. You would then have to have a hidden form field that mirrored the data that is typed into the iFrame (removing the span tag).
If you want to go this way let me know if you need any more help.

Categories