Question

我想知道如何创建后退按钮以在输入的字符中后退吗？我有一个退格键可以工作，但是在不删除字符的情况下无法返回。

function setBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);}
function setOne(){ document.getElementById('someText').value += "A"; }
function setTwo(){ document.getElementById('someText').value += "B"; }
function moveBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);}

.inputUser{
width:55%;
float:left;	
margin-top:3%;
border:0px;
overflow-x:scroll;
text-align:left;
border:1px #000000 solid;
}

请不要使用jQuery。谢谢！

Answer 1

我发现必须先确定焦点并获得插入符号的位置，然后才能移动插入符号。我从这个堆栈答案中得到了帮助 Get caret position in HTML input?来自用户Tim Down。

function focus(){
var foo =document.getElementById('someText');
foo.focus();
foo.setSelectionRange(foo.value.length,foo.value.length);
inputLen = document.getElementById('someText').value.length;
}
function setBack(){document.getElementById('someText').value = document.getElementById('someText').value.substring(0, document.getElementById('someText').value.length - 1);focus();}
function setOne(){ document.getElementById('someText').value += "A";focus(); }
function setTwo(){ document.getElementById('someText').value += "B";focus(); }
   
function moveBack(){
var elem = document.getElementById('someText');
elem.setSelectionRange(elem.value.length,  getInputSelection(elem).start - 1 );
elem.focus();}
function getInputSelection(el) {
var start = 0, end = 0, normalizedValue, range,
textInputRange, len, endRange;
if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") {
start = el.selectionStart;
end = el.selectionEnd;
} else {
range = document.selection.createRange();
if (range && range.parentElement() == el) {
len = el.value.length;
normalizedValue = el.value.replace(/\r\n/g, "\n");
textInputRange = el.createTextRange();
textInputRange.moveToBookmark(range.getBookmark());
endRange = el.createTextRange();
endRange.collapse(false);
if (textInputRange.compareEndPoints("StartToEnd", endRange) > -1) {
start = end = len;
} else {
start = -textInputRange.moveStart("character", -len);
start += normalizedValue.slice(0, start).split("\n").length - 1;
if (textInputRange.compareEndPoints("EndToEnd", endRange) > -1) {
end = len;
} else {
end = -textInputRange.moveEnd("character", -len);
end += normalizedValue.slice(0, end).split("\n").length - 1;}}}}
return {start: start, end: end};}

.inputUser{
width:55%;
float:left;	
margin-top:3%;
border:0px;
overflow-x:scroll;
text-align:left;
border:1px #000000 solid;
}

<input id="someText" class="inputUser" type="text" readonly dir="rtl">

<div>
<button onclick="setOne();">A</button>
<button onclick="setTwo();">B</button>
<button onclick="setBack();">Backspace</button>
<button onclick="moveBack();">back</button>
</div>

我如何使按钮的行为像后退箭头键一样？

1 个答案: