入力フィールドの最後のx文字に異なるスタイルを適用してください

Question

私は現在の仕事に直面しています。基本的に、フィールドの最後のx文字を残りのフィールドとは別に表示する方法はありますか？この効果に

何か、これは<input>フィールドに入力され、入力されたと仮定すると： 「TheLast6LettersOfThisShouldBe ビガー」

意図した効果だろう。これを完了するために考えられる唯一の可能性のあるアプローチは、2つの別々の入力フィールドを使用し、常に2番目の入力の最後のx文字を異なるスタイルにすることです。ただし、これはユーザーとのやりとりに問題をもたらします（2番目の入力フィールドの前にあるバックスペースでは、前の文字は削除されません）。

アイデアや考えはありますか？

更新：前に言及しておきますが、これはユーザーが入力中に動的なものになることを意図しています。

Answer 1

私はあなたがその中のスタイルを持つことができない古典的なテキストエリアの原因を使用することはできないと考えています。私はcontenteditable divでそれを試しました。 jQueryは関係なく、あなたが入力するときに動作します。

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>

Answer 2

On buttonClick;入力ボックスに入力されたものは、最後の6文字列が太字で表示されるように調整されています。

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>

Answer 3

あなたは最後の5つの文字が太字取得したいんとき、私は、あなたの質問にコメントであなたを尋ねました。あなたは私に答えをくれませんでした。私はあなたが入力から手を離したときに最後の5文字が太字になる例を作りました。

あなたはmouseoutイベントに

を変更することができます基本的に私はcontentEditableのdivを作って、（あなたがスタイルを変更することができます）と、そのdiv要素の内容を編集入力のようなスタイル。入力値（値を送信できるようにする）は非表示で、contentEditable divのテキストと同じ値になります。

$("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">