0

我有一个大问题，我试图找到解决方法，但没有奏效，所以最后在这里发布。 访问此链接以查看 Chrome 中存在的 UI 问题。理想情况下，蓝色文本框是 UI 的外观。但是，当我继续添加元素并且随着文本框大小的增加时，它不会显示最后一个文本，而是显示像非蓝色文本框这样的数据，即使 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 也一样

任何形式的帮助表示赞赏。谢谢。

4

1 回答 1

1

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

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

 inputField.blur();

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

于 2013-05-13T09:56:34.673 回答