Apply different style to last x characters of input field

Question

I am faced with a task as of current I am not sure on how to complete. Essentially, is there any way I could go about getting the last x characters of an field to display differently from the rest of the field?

Something to the effect of this, assuming this was a typed input into an <input> field: "TheLast6LettersOfThisShouldBeBigger"

That would be the intended effect. The only potential approach I could think of for completing this is to use two separate input fields and always have the last x characters in the second input styled differently. This would, however, provide problems with user interaction (backspacing at the front of the second input field would result in no previous character being deleted).

Any ideas or thoughts?

Update: I forget to mention before, this is intended to be a dynamic thing as the user is typing.

Sounds a bit like a [XY problem](https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem) to me. Why do you need it to be bold? — Matthias Seifert, Nov 15 '17 at 12:00
And also when do you want to apply those styles ? as the user writes inside the input, when the user finishes writing etc. — Mihai T, Nov 15 '17 at 12:09
@MatthiasSeifert - Apologies for causing that problem, wasn't aware of that until now. In regards to the purpose of it being bold - the intended effect is that the last 6 characters of that input field are the most important and as part of the user interface design requested should be more prominent and visible than the previous characters, due to their significance. — Plobnob, Nov 15 '17 at 12:53
On SO, you are expected to try to **write the code yourself**. After **[doing more research](//meta.stackoverflow.com/questions/261592)** if you have a problem you can **post what you've tried** with a **clear explanation of what isn't working** and providing a **[Minimal, Complete, and Verifiable example](//stackoverflow.com/help/mcve)**. — Rob, Nov 15 '17 at 13:03

Hugo Sainte-Marie · Accepted Answer · 2017-11-15T13:05:29.977

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#3866442
function 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>

a link to a codePen is not ideal. You should post your code here in a snippet. Also, an answer without an explanation is no answer at all — Mihai T, Nov 15 '17 at 12:53
I shall have a look at that and give that approach a try myself - thank you for the suggestion. I'll update on how that goes. — Plobnob, Nov 15 '17 at 12:56
You are required to post your code here, not a codepen which can change or disappear tomorrow helping no one in the future and making your answer useless. https://stackoverflow.com/help/how-to-answer — Rob, Nov 15 '17 at 13:00
@MihaiT & Rob You guys are right, my bad. I edited my answer. — Hugo Sainte-Marie, Nov 15 '17 at 13:02
@Ashugeo Still not ideal. Make a code snippet by pressing Ctrl+M or the button near the image icon ( in the toptoolbar ) . After clicking on edit, ofcourse — Mihai T, Nov 15 '17 at 13:03
@MihaiT Thanks for helping me improve my answers, I edited again. — Hugo Sainte-Marie, Nov 15 '17 at 13:05

Rajkumar Somasundaram · Answer 2 · 2017-11-15T13:03:40.763

1

On buttonClick; what u typed in input box is tweaked such that last 6 strings are in bold fonts.

document.getElementById("boldStringButton").onclick = function() {
  let thestring = document.getElementById("inputBox").value;
  var backslice = thestring.slice(thestring.length - 6);
  var frontslice = thestring.substr(0, thestring.length - 6)
  var newBoldedString = frontslice + "<b>" + backslice + "</b>";

  document.getElementById("boldedString").innerHTML = newBoldedString;
}

<input id="inputBox">
<button id="boldStringButton">
Embolden string
</button>
<div id="boldedString">

</div>
<div>
  Enter text and hit button to embolden last 6 strings
</div>

edited Nov 15 '17 at 13:03

answered Nov 15 '17 at 12:27

Rajkumar Somasundaram

1,225
2
10
20

You should make a code snippet with your code here and add some explanation to your solution – Mihai T Nov 15 '17 at 12:53
thank u.. have updated the answer.. appreciate the "nudge". – Rajkumar Somasundaram Nov 15 '17 at 13:04

score 1 · Answer 3 · answered Nov 15 '17 at 12:45

I asked you in a comment to your question, when do you want the last 5 letters to get bold . You gave me no answer so i made an example where when you hover out of the input, the last 5 letters get bold.

You can change the mouseout event

Basically i made a contentEditable div and styled like an input ( you can change the styles ) and edit that div's contents. The input ( for you to be able to submit the values ) is hidden and will have the value the same as the contentEditable div's text.

$("div").mouseout(function() {
  var inputText = $(this).text()
  $("input").val(inputText)
  var lastFive = inputText.substr(inputText.length - 5)
  var firstLetters = inputText.substr(0, inputText.length - 5)


    $(this).html(firstLetters + "<strong>" + lastFive + "</strong>");


})

div {
  border: 1px solid grey;
  width: 200px;
  height: 20px;
  padding: 2px 3px;
  overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div contentEditable>

</div>
<input type="hidden">

Apply different style to last x characters of input field

3 Answers3