Is there a way to style part of an input field's value?
Your suspicions are correct: styles will apply to the whole input only.
As styles can apply to the entirety of an element only, a solution will require at least one element per required colour.
Consider the division of the input field with respect to the point at which the user is making changes. There are three sections of the input:
- that before the point at which changes are being applied
- that after the point at which changes are being applied
- that at the point the changes are being applied
You cannot achieve this with a single input element. And as the point at which the changes are being applied can change, the portions of the 'input' wrapped by the three elements will also change. JavaScript is required for a solution.
You should initially include a regular input element and forgo any of the required colouring. Use JavaScript to replace the input with a suitable container element. This can be styled to mimic an input element.
As changes occur, use JavaScript to identify the above-mentioned three divisions. Wrap them in suitable elements (spans would be ideal) and colour as needed.
Consider the following starting point for the generated replacement markup:
<div class="input">
<span class="nonEdited before">foo</span>
<span class="edited">fizz</span>
<span class="nonEdited after">bar</span>
</div>
Use click, keydown and keyup events to figure out the three divisions for the input and to apply wrap the three portions of the faked input as required.
Style a particular text in input field
I don't think it's possible to do it inside <textarea>
. A workaround is to create a "fake" textarea using a <div contenteditable>
. Then you can use something like:
let input = document.querySelector(".input");
input.innerHTML = input.innerHTML.replace("some", `<span class="hl">some</span>`);
and apply CSS to the span class:
.hl {
color:red;
}
different text colour for part of string in text input
While Google uses something like this
Unfortunately you cannot " open + close " an input
element like:
<input> <span>Bold</span> normal </input>
My suggestion is to go this way using contenteditable
: Live Demo.
<div id="input" contenteditable="true"><span>This is </span> quite cool!</div>
CSS sample:
#input{
font-family:Arial, Helvetica, sans-serif;
border:1px solid #ccc;
background:#eee;
height:20px;
width:200px;
padding:7px;
color:#888;
}
#input span{
color:#444;
font-weight:bold;
}
Then in JS to retrieve the element "value" you can use:
alert( this.textContent );
Example
Can I style only a specific part of an html input's string value?
Form controls render text only. Styling parts of a string requires html
You would need to wrap parts of string to style in <span>
Start of string <span style="color:red">substring to style</span>
and put it in an html containing element
Apply different style to last x characters of input field
I believe you won't be able to use a classic textarea cause you can't have styles inside it. I gave it a try with a contenteditable
div. No jQuery involved, works live as you type.
const charLimit = 6; // replace by numbers of characters you want
const txt = document.getElementById('myInput');
txt.addEventListener('keyup', function(e) { const value = txt.textContent; const endString = value.length > charLimit ? value.substr(value.length - charLimit) : value.substr(-value.length); const firstString = value.slice(0, -charLimit);
txt.innerHTML = firstString + '<span>' + endString + '</span>'; setEndOfContenteditable(txt);});
// From https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442function setEndOfContenteditable(contentEditableElement){ var range,selection; if(document.createRange)//Firefox, Chrome, Opera, Safari, IE 9+ { range = document.createRange();//Create a range (a range is a like the selection but invisible) range.selectNodeContents(contentEditableElement);//Select the entire contents of the element with the range range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start selection = window.getSelection();//get the selection object (allows you to change selection) selection.removeAllRanges();//remove any selections already made selection.addRange(range);//make the range you have just created the visible selection } else if(document.selection)//IE 8 and lower { range = document.body.createTextRange();//Create a range (a range is a like the selection but invisible) range.moveToElementText(contentEditableElement);//Select the entire contents of the element with the range range.collapse(false);//collapse the range to the end point. false means collapse to end rather than the start range.select();//Select the range (make it the visible selection }}
* { font-family: sans-serif;}
#myInput { border: 1px solid #ccc; padding: 10px;}
#myInput:focus { outline: none; border: 1px solid #333;}
#myInput > span { font-weight: bold;}
<div id="myInput" contenteditable></div>
Related Topics
Why Anchor Tag Does Not Take Height and Width of Its Containing Element
How to Close ≪Img≫ Tag Properly
Canvas Drawings, Like Lines, Are Blurry
Why Should I Use 'Li' Instead of 'Div'
Css3 Border-Radius Clipping Issues
How to Make Scrollable Table with Fixed Headers Using CSS
Prevent Scroll-Bar from Adding-Up to the Width of Page on Chrome
Regular Expression to Extract Text from HTML
HTML - Display Image After Selecting Filename
Jquery: 'Uncaught Typeerror: Illegal Invocation' at Ajax Request - Several Elements
Setting the Character Encoding in Form Submit For Internet Explorer
Youtube Autoplay Not Working on Mobile Devices With Embedded Html5 Player
Use CSS Gradient Over Background Image
Tooltip with HTML Content Without JavaScript
Css3 Transition Doesn't Work with Display Property
How to Make a Whole 'Div' Clickable in HTML and CSS Without JavaScript