將插入符號移動到文本輸入字段的末尾並使末尾可見

我瘋了。我有一個自動提示框，供用戶選擇一個建議。在下一個建議選項上，文本輸入框的值超出其大小。我可以將克拉移至輸入字段交叉瀏覽器的末尾，沒有問題。但在Chrome和Safari上，我無法在最後看到克拉。文本的結尾不可見。將插入符號移動到文本輸入字段的末尾並使末尾可見

有沒有辦法將克拉移動到文本輸入字段的末尾，並使字段的末尾可見，以便用戶不會對輸入克拉的位置感到困惑？

我走到這一步：

<html> 
<head><title>Field update test</title></head> 

<body> 
<form action="#" method="POST" name="testform"> 

<p>After a field is updated the carat should be at the end of the text field AND the end of the text should be visible</p> 

<input type="text" name="testbox" value="" size="40"> 

<p><a href="javascript:void(0);" onclick="add_more_text();">add more text</a></p> 

</form> 

<script type="text/javascript"> 
<!-- 
var count = 0; 

function add_more_text() { 
    var textfield = document.testform.elements['testbox']; 

    textfield.focus(); 

    if (count == 0) textfield.value = ''; // clear old 

    count++; 
    textfield.value = textfield.value + (textfield.value.length ? ', ' : '') + count + ": This is some sample text"; 

    // move to the carat to the end of the field 
    if (textfield.setSelectionRange) { 
     textfield.setSelectionRange(textfield.value.length, textfield.value.length); 
    } else if (textfield.createTextRange) { 
     var range = textfield.createTextRange(); 
     range.collapse(true); 
     range.moveEnd('character', textfield.value.length); 
     range.moveStart('character', textfield.value.length); 
     range.select(); 
    } 

    // force carat visibility for some browsers 
    if (document.createEvent) { 
     // Trigger a space keypress. 
     var e = document.createEvent('KeyboardEvent'); 
     if (typeof(e.initKeyEvent) != 'undefined') { 
     e.initKeyEvent('keypress', true, true, null, false, false, false, false, 0, 32); 
     } else { 
     e.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 0, 32); 
     } 
     textfield.dispatchEvent(e); 

     // Trigger a backspace keypress. 
     e = document.createEvent('KeyboardEvent'); 
     if (typeof(e.initKeyEvent) != 'undefined') { 
     e.initKeyEvent('keypress', true, true, null, false, false, false, false, 8, 0); 
     } else { 
     e.initKeyboardEvent('keypress', true, true, null, false, false, false, false, 8, 0); 
     } 
     textfield.dispatchEvent(e); 
    } 
} 
// --> 
</script> 

</body> 
</html>

感謝

來源

2010-04-22 whereisalext

我想出了一個解決方案。 Webkit（Safari和Chrome）需要踢褲子才能正確執行鍵盤事件。在退格前添加一個模糊（），然後聚焦（）：

textfield.blur(); // Webkit wake-up hack 
    textfield.focus(); 
    textfield.dispatchEvent(e);

謝謝。現在在Mac和Windows上運行Safari，Chrome，FF和IE。

來源

2010-04-22 15:57:03 whereisalext

將插入符號移動到文本輸入字段的末尾並使末尾可見

回答

相關問題