Question

我面临的任务目前我不知道如何完成。从本质上讲，有什么方法可以让字段的最后x个字符显示与字段的其他部分不同？

这样做会产生一些影响，假设这是<input>字段的输入输入： “TheLast6LettersOfThisShouldBe的更大”

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

任何想法或想法？

更新：我之前忘记提及，这是用户输入时的动态内容。

Answer 1

我相信你无法使用经典的textarea，因为你内心没有风格。我用contenteditable div尝试了一下。不涉及jQuery，在您键入时可以正常工作。

＆＃13;

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

＆＃13;

* {
  font-family: sans-serif;
}

#myInput {
  border: 1px solid #ccc;
  padding: 10px;
}

#myInput:focus {
  outline: none;
  border: 1px solid #333;
}

#myInput > span {
  font-weight: bold;
}

＆＃13;

<div id="myInput" contenteditable></div>

＆＃13;

Answer 2

按钮点击;输入框中输入的内容经过调整，最后6个字符串是粗体字。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

我在评论你的问题时问你，你什么时候想要最后5个字母变大胆？你没有回答我，所以我做了一个例子，当你将鼠标悬停在输入之外时，最后5个字母变为粗体。

您可以更改mouseout事件

基本上我创建了一个contentEditable div并且像输入一样（你可以改变样式）并编辑div的内容。输入（您可以提交值）是隐藏的，其值与contentEditable div的文本相同。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

对输入字段

3 个答案: