将插入符移动到文本输入字段的末尾并使结尾可见 [英] move caret to the end of a text input field AND make the end visible
问题描述
我疯了。我有一个自动提示框，用户可以在其中选择建议。在下一个建议选择中，文本输入框的值超出其大小。我可以将克拉移动到输入字段crossbrowser的末尾，没问题。但在Chrome和Safari上我最终无法看到克拉。文本的末尾不可见。
I'm going insane. I have an autosuggest box where users choose a suggestion. On the next suggestion selection the value of the text input box exceeds its size. I can move the carat to the end of the input field crossbrowser, no problem. But on Chrome and Safari I cannot SEE the carat at the end. The end of the text is not visible.
有没有办法将克拉移动到文本输入字段的末尾并且字段的末尾可见，以便用户不会对输入的克拉去哪里感到困惑？
Is there a way to move the carat to the end of a text input field AND have the end of the field visible so that the user is not confused about where the input carat went?
到目前为止我得到了什么：
what I got so far:
<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>
谢谢
推荐答案
我提出了一个解决方案。 Webkit（Safari和Chrome）需要穿上裤子来正确执行键盘事件。在退格之前添加blur（）然后focus（）：
I came up with a solution. Webkit (Safari and Chrome) needs a kick in the pants to perform the keyboard event correctly. Add a blur() and then focus() before the backspace:
textfield.blur(); // Webkit wake-up hack
textfield.focus();
textfield.dispatchEvent(e);
谢谢。适用于Mac和Windows上的Safari，Chrome，FF，IE。
Thanks. Works in Safari, Chrome, FF, IE on Mac and Windows now.
这篇关于将插入符移动到文本输入字段的末尾并使结尾可见的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
