JavaScript replaceメソッド終了をスクロールさせない

Question

JavaScript置換メソッドを使用してトランスレータを作成しようとしましたが正常に動作しています。私の質問は、テキストボックスに何かを入力すると置換され、カーソルが単語の最後に移動するので、テキストボックスで終了するようにスクロールを停止する方法です。したがって、私はいくつかの単語の間に置き換えたり、入力したりすることはできません。

HTMLコード：

<form name="inputform"> 
<input class="Search" type="text" autofocus name="searchbox" onKeyUp="transcrire()" id="Search"> 
</form> 

JavaScriptのコード：

var inp; 
function transcrire() { 
inp = document.inputform.searchbox.value; 
inp = inp.replace(/a/g, "B"); 
inp = inp.replace(/i/g, "D"); 
document.inputform.searchbox.value=inp; 
} 

私は、テキストボックスに "A" を入力したとき、それは "B" に置き換えられます。テキストボックスに「i」と入力すると、「D」に置き換えられます。あなたが私にJavaScriptとJQueryの答えを与えてくれれば幸いです。このテキストボックスには他のボタンや何も使用できません。相続人

Answer 1

は、単に初期の目標位置を取得し、それが正規表現に置き換えた後、あった場所に戻って位置を設定。位置を計算する方法

var inp; 
 
$('#Search').on('keyup',function(e){ 
 
    var target = e.target, 
 
    position = target.selectionStart; 
 

 
    inp = $(this).val(); 
 
    inp = inp.replace(/a/g, "B"); 
 
    inp = inp.replace(/i/g, "D"); 
 
    $(this).val(inp); 
 
    $(this).get(0).setSelectionRange(position, position); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="inputform"> 
 
    <input class="Search" type="text" autofocus name="searchbox" id="Search"> 
 
</form>

Answer 2

私はこのSOポストから得た例：Set keyboard caret position in html textbox

function setCaretPosition(elemId, caretPos) { 
    var elem = document.getElementById(elemId); 

    if(elem != null) { 
     if(elem.createTextRange) { 
      var range = elem.createTextRange(); 
      range.move('character', caretPos); 
      range.select(); 
     } 
     else { 
      if(elem.selectionStart) { 
       elem.focus(); 
       elem.setSelectionRange(caretPos, caretPos); 
      } 
      else 
       elem.focus(); 
     } 
    } 
} 

Answer 3

var inp; 
 
$('#Search').on('keyup',function(e){ 
 
    inp = $(this).val(); 
 
    inp = inp.replace(/a/g, "B"); 
 
    inp = inp.replace(/i/g, "D"); 
 
    $(this).val(inp); 
 
    $(this).get(0).setSelectionRange(0, 0); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form name="inputform"> 
 
<input class="Search" type="text" autofocus name="searchbox" id="Search"> 
 
</form>