Fatal编程技术网
  • javascript/
  • Javascript 如何解决在chrome中将光标设置到文本框最后一个位置时的UI问题

Javascript 如何解决在chrome中将光标设置到文本框最后一个位置时的UI问题

javascript jquery jquery-ui google-chrome

Javascript 如何解决在chrome中将光标设置到文本框最后一个位置时的UI问题,javascript,jquery,jquery-ui,google-chrome,Javascript,Jquery,Jquery Ui,Google Chrome,我有一个大问题，我试图找到解决办法，但没有工作，所以最后张贴在这里。 查看Chrome中存在的UI问题。理想情况下，蓝色文本框是UI的外观。但是，当我继续添加元素时，随着textbox大小的增加，它不会显示最后一个文本，而是像非蓝色文本框一样显示数据，即使插入符号的位置在textbox的最后。 我正在使用这个代码 <!doctype html> <html lang="en"> <head> <meta charset="utf-8" /> &l

我有一个大问题，我试图找到解决办法，但没有工作，所以最后张贴在这里。 查看Chrome中存在的UI问题。理想情况下，蓝色文本框是UI的外观。但是，当我继续添加元素时，随着textbox大小的增加，它不会显示最后一个文本，而是像非蓝色文本框一样显示数据，即使插入符号的位置在textbox的最后。 我正在使用这个代码

<!doctype html>

<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Autocomplete - Multiple values</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
];
function split( val ) {
    return val.split( /,\s*/ );
}
function extractLast( term ) {
    return split( term ).pop();
}

$( "#tags" )
    // don't navigate away from the field on tab when selecting an item
    .bind( "keydown", function( event ) {
        if ( event.keyCode === $.ui.keyCode.TAB &&
                $( this ).data( "ui-autocomplete" ).menu.active ) {
            event.preventDefault();
        }
    })
    .autocomplete({
        minLength: 0,
        source: function( request, response ) {
            // delegate back to autocomplete, but extract the last term
            response( $.ui.autocomplete.filter(
                availableTags, extractLast( request.term ) ) );
        },
        focus: function() {
            // prevent value inserted on focus
            return false;
        },
        select: function( event, ui ) {
            var terms = split( this.value );
            // remove the current input
            terms.pop();
            // add the selected item
            terms.push( ui.item.value );
            // add placeholder to get the comma-and-space at the end
            terms.push( "" );
            this.value = terms.join( ", " );
            focusCampo(this.id);
            return false;
        }
    });
});

function focusCampo(id) {
var inputField = document.getElementById(id);
if (inputField != null && inputField.value.length != 0) {
    if (inputField.createTextRange) {
        var FieldRange = inputField.createTextRange();
        FieldRange.moveStart('character', inputField.value.length);
        FieldRange.collapse();
        FieldRange.select();
    } else if (inputField.selectionStart || inputField.selectionStart == '0') {
        var elemLen = inputField.value.length;
        inputField.selectionStart = elemLen;
        inputField.selectionEnd = elemLen;
        inputField.focus();
    }
} else {
    inputField.focus();
}
}
</script>
</head>
<body>

<div class="ui-widget">
<label for="tags">Tag programming languages: </label>
<input id="tags" size="50" />
</div>
</body>
</html>


jQuery UI自动完成-多个值
$（函数（）{
var availableTags=[
“动作脚本”，
“AppleScript”，
“Asp”，
“基本”，
“C”，
“C++”，
“Clojure”，
“COBOL”，
“ColdFusion”，
“二郎”，
“Fortran”，
“好极了”，
“哈斯克尔”，
“爪哇”，
“JavaScript”，
“口齿不清”，
“Perl”，
“PHP”，
“Python”，
“红宝石”，
“斯卡拉”，
“方案”
];
功能拆分（val）{
返回val.split（/，\s*/）；
}
功能提取最后（学期）{
返回拆分（term.pop（）；
}
$（“#标签”）
//选择项目时不要离开选项卡上的字段
.bind（“键控”，函数（事件）{
如果（event.keyCode===$.ui.keyCode.TAB&&
$（此）.data（“ui自动完成”）.menu.active）{
event.preventDefault（）；
}
})
.自动完成({
最小长度：0，
来源：功能（请求、响应）{
//委托回自动完成，但提取最后一项
响应（$.ui.autocomplete.filter(
availableTags，extractLast（request.term））；
},
焦点：函数（）{
//防止在焦点上插入值
返回false；
},
选择：功能（事件、用户界面）{
var术语=分割（此值）；
//删除当前输入
terms.pop（）；
//添加所选项目
术语推送（ui.item.value）；
//添加占位符以在末尾获得逗号和空格
术语。推送（“”）；
this.value=terms.join（“，”）；
focusCampo（本编号）；
返回false；
}
});
});
函数focusCampo（id）{
var inputField=document.getElementById（id）；
if（inputField！=null&&inputField.value.length！=0）{
if（inputField.createTextRange）{
var FieldRange=inputField.createTextRange（）；
FieldRange.moveStart（'character'，inputField.value.length）；
FieldRange.collapse（）；
FieldRange.select（）；
}else if（inputField.selectionStart | | inputField.selectionStart=='0'）{
var elemLen=inputField.value.length；
inputField.selectionStart=elemLen；
inputField.selectionEnd=elemLen；
inputField.focus（）；
}
}否则{
inputField.focus（）；
}
}
标记编程语言：

感谢您的任何帮助。谢谢。

看看这里：

似乎只有在实际对焦时（在您的情况下，输入不会松开它），才可以使用选择和焦点将文本移动到插入符号，因此在focus调用之前的focusCampo函数中，只需添加：

 inputField.blur();
这是修改过的提琴，它似乎在工作：

在提供的JSFIDLE样本中找不到任何问题。您是否在chrome中正确看到它？插入符号设置在末尾，但您没有看到结尾文本。尝试选择actionscript 6~7次。你会理解的。我也花了一些时间去看它-当你使用自动完成来添加建议的匹配项时，输入不会将文本“滚动”到插入符号/最后一个位置。当你键入时，它工作得很好。但当你们从“自动完成”框中选择一个值时，问题就出现了。@ChamikaSandamal true..Hi@Damyan Petev谢谢你们的回答。它起作用了。让我测试一下，然后我会把它标记为接受答案：）非常感谢。