创建按钮 onclick 功能以充当箭头键

Question

我有这个作为退格的 Java 脚本函数。这工作正常，但现在我想创建一个返回的按钮，以及一个在不删除文本的情况下继续前进的按钮（如箭头键的行为）。对此的任何帮助将不胜感激。

 function setBack() {
     document.getElementById('user').value = 
     document.getElementById('user').value.substring(0, 
     document.getElementById('user').value.length - 1);
 }

 <input id="user" type="text">
 <button type="button" onclick="setBack();">backspace</button>
 <button type="button" onclick="">back</button>
 <button type="button" onclick="">forward</button>

没有 jQuery，请仅使用本机 Javascript。

Answer 1

试试看：

       
            let input = document.getElementById('Test');
            input.focus();
              
            let index = 0;

            document.getElementById('Prev').addEventListener('click', function(){
                
                index -= 1;
                
                if(index <= 0) {
                    index = input.value.length;
                }

                input.focus();
                input.selectionEnd = index;
                input.selectionStart = index;
            });


            document.getElementById('Next').addEventListener('click', function(){
                console.log(index);
                
                index += 1;
                
                if(index > input.value.length) {
                    index = 0;
                }

                input.focus();
                input.selectionEnd = index;
                input.selectionStart = index;
            });

        <input id="Test" type="text" value="helloooo">
        <button id="Prev">Prev</button>
        <button id="Next">Next</button>

Answer 2

您可以通过selectionStart获取光标位置来做到这一点。这是示例代码。您可以根据需要为此添加更多功能。

function back(){

                console.log(user.selectionStart-1)
                if(user.selectionStart !== 0 ){
                user.focus();
                user.selectionEnd = user.selectionStart
                user.selectionStart = user.selectionStart-1
                }

            }
function forward(){

                console.log(user.selectionStart)
                user.focus()
                user.selectionEnd = user.selectionStart+1
                user.selectionStart = user.selectionStart+1

            }

Answer 3

您可以将 caret 位置存储在 var say caretPosition 中。并在前后传递caret position。只是increment pos 在前面和decrement pos 在后面。这是我尝试过的方法。

var caretPosition = 0;
function updateLength(){
  caretPosition =  document.getElementById('user').value.length 
}
function setBack(e) {
     var str= document.getElementById('user').value;
     var position =document.getElementById('user').selectionStart;
     caretPosition = position-1;
     document.getElementById('user').value = 
     str.substring(0,position - 1) + str.substring(position, str.length)
     resetCaretPosition('user',caretPosition);
    
 }
 function back(){
   caretPosition =(caretPosition>1)?caretPosition-1:caretPosition ;
   resetCaretPosition('user',caretPosition);
}
 
 function forward(){
   caretPosition =caretPosition+1 ;
   resetCaretPosition('user',caretPosition);
 }
 function resetCaretPosition(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();
        }
    }
}

<input id="user" oninput="updateLength()"  type="text">
 <button type="button" onclick="setBack(event);">backspace</button>
 <button type="button" onclick="back()">back</button>
 <button type="button" onclick="forward()">forward</button>