如何以編程方式添加文本後在輸入中顯示文本的結尾？

我想以編程方式在輸入中添加單詞並始終查看文本的結尾。但問題是，當我添加文字（如input.value += 'word'）時，文本的長度幾乎與輸入長度相同時，輸入內部的文本不會移動，所以我只能看到文本的開頭，並且結尾變爲隱藏。
我想，如果我可以把光標移到輸入這將有助於結束，但沒有用光標在Chrome中不工作的技巧，如如何以編程方式添加文本後在輸入中顯示文本的結尾？

input.value = input.value

或

input.setSelectionRange(input.value.length, input.value.length);

來源

2016-05-31 cooperok

或許這可以幫助？ http://stackoverflow.com/questions/511088/use-javascript-to-place-cursor-at-end-of-text-in-text-input-element –

我試過這個例子，它們在Chrome中不起作用 – cooperok

如果輸入的信息沒有焦點，Chrome會一直顯示「滾動」到左側，顯示輸入值的開始。

如果該元素具有焦點，那麼你可以設置選擇範圍移動光標：

window.onload = function(){ 
 
    
 
    var input = document.getElementById('foobar'); 
 
    input.value += ' bazbat'; 
 
    
 
    input.focus(); 
 
    input.setSelectionRange(input.value.length - 1); 
 
    
 
}

<input id="foobar" value="foobar" size="6">

但如果光標移動這將是一個非常混亂和令人沮喪的UX而用戶正在嘗試鍵入一個值。

其它問題需要考慮：

更改您輸入的寬度相匹配的值。 make html text input field grow as I type?
在輸入和量程之間切換（編輯模式與讀取模式）。通過跨度，您可以更好地控制文本的顯示方式。 Jquery: Toggle between input and text on click
使用某種指示器來提醒用戶其輸入值中的一個已被修改。即使他們可以看到整個值，這也很有用，因爲他們可能不會注意到該值已更新。

來源

2016-05-31 15:17:28 JDB

感謝您的工作示例 – cooperok

似乎工作不夠好：

let input = document.getElementById('auto'); 
 
let sentence = 'Courage is the magic that turns dreams into reality.'; 
 
let index = 0; 
 

 
setTimeout(function typing() { 
 
    let letter = sentence.charAt(index++); 
 

 
    input.blur(); 
 
    input.value += letter; 
 
    input.focus(); 
 
    input.setSelectionRange(index, index); 
 

 
    if (index < sentence.length) { 
 
    let ms = Math.floor(75 + Math.random() * 150); 
 

 
    setTimeout(typing, ms); 
 
    } 
 
}, 1000);

<input id="auto" type="text">

來源

2016-05-31 15:29:37

感謝您的工作示例 – cooperok

如何以編程方式添加文本後在輸入中顯示文本的結尾？

回答

相關問題