Question

我有一个很大的问题，我试图找到修复，但没有工作，所以最后发布在这里。 Visit this link以查看Chrome中存在的用户界面问题。理想的是，BLUE COLORED文本框是UI的外观。但是当我继续添加元素时，随着文本框大小的增加，它不会显示最后一个文本，而是显示非NON BLUE COLORED文本框之类的数据，即使CARET的位置是文本框的最后位置。我正在使用此代码。

<!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>

JS Fiddle for the same

感谢任何形式的帮助。感谢。

Answer 1

看看这里：Set mouse focus and move cursor to end of input using jQuery

似乎只需将文本移动到插入符号选择，焦点仅在实际聚焦时有效（在您的情况下输入不会松散），因此在焦点调用之前的focusCampo函数中只需添加：

 inputField.blur();

这是修改后的小提琴，它似乎正在起作用：http://jsfiddle.net/59YaL/25/

如何在Cursor设置为chrome中文本框的最后位置时修复UI问题

1 个答案: