Question

我有这个Java脚本函数作为后台空间。这工作正常，但现在我想创建一个返回的按钮，一个前进而不删除文本（如箭头键的行为）。非常感谢任何帮助。

＆＃13;

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

＆＃13;

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

＆＃13;

没有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。这是我试过的方式。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 4

我认为您应该使用localStorage（）来保存文本。

dplyr

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

4 个答案: