0

MagicSuggestの例を見ると、コンポーネントをクリックするか、タブでコンポーネントに移動すると、コンポーネントのスタイルが変わります (コンポーネントの周りの青い境界線とキーボード カーソルが入力フィールドにあります)。プログラムで MagicSuggest コンポーネントにフォーカスを与えるにはどうすればよいですか?

試してみまし$(...).focus()たが、これは同じ動作を提供しません。一部のデバッグでは、イベント ハンドラーをトリガーする必要があることが指摘されて_onInputFocusいますが、これをプログラムで起動することはできません。を使用$(...).find('input[id^="ms-input"]').focus()すると、内部入力フィールドにフォーカスが移りますが、ユーザー操作と同じ方法ではフォーカスされません (コンポーネントには青い境界線がなく、キーボード カーソルはType or click here「空のテキスト」の後にあります)。

次の例は、MagicSuggest コンポーネントにプログラムでフォーカスを当てようとする方法を示しています。ボタンをクリックOKすると、MagicSuggest の選択がクリアされ、MagicSuggest コンポーネントにフォーカスが置かれます。

何か間違ったことをしていますか、それとも MagicSuggest の制限ですか? 後者の場合、それを修正する最良の方法は何ですか?

example.html :

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>MagicSuggest Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width" />
</head>
<body>
<form id="frm-ms" method="post" action="">
<p>
<label id="lbl-ms" for="ms-ex">MagicSuggest Example:</label>
<div id="ms-ex"></div>
</p>
<p>
<button id="btn-ok" type="button">OK</button>
</p>
<input id="ms-data" type="hidden" disabled />
</form>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<!-- http://raw.github.com/nicolasbize/magicsuggest/master/src/magicsuggest-1.3.1.js -->
<script type="text/javascript" src="magicsuggest-1.3.1.js"></script>
<!-- http://raw.github.com/nicolasbize/magicsuggest/master/src/magicsuggest-1.3.1.css -->
<link rel="stylesheet" type="text/css" href="magicsuggest-1.3.1.css" />
<script type="text/javascript" src="example.js"></script>
</body>
</html>

example.js :

var msex = (function () {
    'use strict';
    var _handlers, init;

    _handlers = {
        _okClick: function () {
            var $msex, msexMS, msg;
            console.group('_okClick');
            msg = 'OK button clicked.';
            console.log('msg=' + msg);
            $msex = $('#ms-ex');
            console.log('$msex=');
            console.dir($msex);
            msexMS = $msex.magicSuggest();
            console.log('msexMS=');
            console.dir(msexMS);
            // Make MS process raw value.
            $msex.blur();
            msexMS.clear();
            // TODO: Figure out how to get the appropriate focus in MagicSuggest, with the blue border and the cursor in the input field.
            console.log('MS focusing ...');
            $msex.find('input[id^="ms-input"]').focus();
            console.log('MS focused.');
            console.groupEnd();
        }
    };

    init = function () {
        var msData, $msex, msexMS;
        console.group('init');
        msData = [
            {id:'001', description:'ABC (001)'},
            {id:'002', description:'DEF (002)'}
        ];
        console.log('msData=');
        console.dir(msData);
        $('#ms-data').val(JSON.stringify(msData));
        $msex = $('#ms-ex');
        msexMS = $msex.magicSuggest({
            allowFreeEntries: true,
            allowValueEntries: true,
            displayField: 'description',
            valueField: 'id',
            data: msData,
            maxDropHeight: 145,
            toggleOnClick: false,
            name: 'code',
            maxSelection: 1,
            value: ['001'],
            width: 200
        });
        $('#btn-ok').click(_handlers._okClick);
        console.groupEnd();
    };

    return {
        init: init
    };
})();

$(document).ready(function () {
    'use strict';
    msex.init();
});
4

2 に答える 2