Javascript 对输入字段的最后x个字符应用不同的样式

我目前面临着一项任务，我不确定如何完成。从本质上讲，有没有办法让字段的最后x个字符显示得与字段的其他字符不同

假设这是一个输入到

字段中的类型化输入： “其最后60个字母应更大”

这将是预期的效果。我能想到的完成这项工作的唯一可能的方法是使用两个单独的输入字段，并始终使第二个输入中的最后x个字符具有不同的样式。但是，这会给用户交互带来问题（第二个输入字段前面的退格将导致之前的字符不会被删除）

有什么想法吗

---

更新：我忘了在前面提到，这是一个动态的东西，因为用户正在键入。

点击按钮；u在输入框中键入的内容经过调整，最后6个字符串以粗体字体显示

document.getElementById（“boldStringButton”）.onclick=function（）{
让字符串=document.getElementById（“inputBox”）.value；
var backslice=字符串切片（字符串长度-6）；
var frontslice=thestring.substr（0，thestring.length-6）
var newBoldedString=frontslice+“”+backslice+“”；
document.getElementById（“boldedString”）.innerHTML=newBoldedString；
}

壮弦
输入文本并点击按钮以增加最后6个字符串的胆量

我相信您将无法使用经典文本区域，因为其中不能包含样式。我用一个

contenteditable

div进行了一次尝试。不涉及jQuery，可以在键入时实时工作

const charLimit=6；//替换为所需的字符数
const txt=document.getElementById（'myInput'）；
txt.addEventListener（'keyup'，函数（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+''+endString+''；
setEndOfContenteditable（txt）；
});
//从https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity/3866442#3866442
函数setEndOfContenteditable（contentEditableElement）
{
var范围、选择；
if（document.createRange）//Firefox、Chrome、Opera、Safari、IE 9+
{
range=document.createRange（）；//创建一个范围（一个范围与所选内容类似，但不可见）
range.selectNodeContents（contentEditableElement）；//选择具有范围的元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
selection=window.getSelection（）；//获取选择对象（允许您更改选择）
selection.removeAllRanges（）；//删除所有已做的选择
selection.addRange（range）；//使刚刚创建的范围成为可见的选择
}
else if（document.selection）//IE 8及更低版本
{ 
range=document.body.createTextRange（）；//创建一个范围（范围与所选内容类似，但不可见）
range.moveToElementText（contentEditableElement）；//使用范围选择元素的全部内容
range.collapse（false）；//将范围折叠到终点。false表示折叠到终点而不是起点
range.select（）；//选择范围（使其成为可见选择
}
}

*{
字体系列：无衬线；
}
#我的输入{
边框：1px实心#ccc；
填充：10px；
}
#我的输入：焦点{
大纲：无；
边框：1px实心#333；
}
#myInput>span{
字体大小：粗体；
}

---

我在对你的问题的评论中问你，你希望最后5个字母何时变粗。你没有回答我，所以我举了一个例子，当你悬停在输入之外时，最后5个字母变粗

您可以更改

mouseout

事件

基本上，我制作了一个

contentEditable

div，并将其样式设置为输入（您可以更改样式）并编辑该div的内容。该输入（您可以提交值）是隐藏的，其值与contentEditable div的文本相同

$（“div”）.mouseout（函数（）{
var inputText=$（this）.text（）
$（“输入”）.val（输入文本）
var lastFive=inputText.substr（inputText.length-5）
var firstLetters=inputText.substr（0，inputText.length-5）
$（this.html（firstLetters+“”+lastFive+“”）；
})

div{
边框：1px纯灰；
宽度：200px；
高度：20px；
填充物：2个3个；
溢出：隐藏；
}

对我来说听起来有点像a。为什么需要加粗？当用户键入时，还是之后？以及何时要应用这些样式？当用户在输入中写入时，当用户完成写入时等等。@MatthiasSeifert-为造成此问题表示歉意，直到现在才意识到。关于加粗的目的预期的效果是，输入字段的最后6个字符是最重要的，并且作为用户界面设计的一部分，由于其重要性，请求的字符应该比前面的字符更加突出和可见。因此，您应该尝试自己编写代码。如果您有问题，您可以发布您所看到的内容ed清楚地解释了什么不起作用，并提供了一个。一个指向代码笔的链接并不理想。你应该将你的代码放在这里的一个片段中。另外，一个没有解释的答案是没有答案的。我应该看看这个问题，自己尝试一下这个方法-谢谢你的建议。我会更新它。你需要在这里发布你的代码，而不是一个明天可能改变或消失的代码笔，它不会在将来帮助任何人，也不会使你的答案变得无用。@MihaiT&Rob你们说得对，m