Question

查看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();
});

Answer 1

试试这个

if (msControl != undefined) 
{                
   msControl.input.focus();
}

Answer 2

通过示例调试显示，在处理OK按钮单击处理程序后，MagicSuggest组件为blurred by a bubbled click event。

一个有效的解决方案是将event.stopPropagation()添加到OK按钮单击处理程序，触发MagicSuggest组件上的blur并触发MagicSuggest组件输入字段上的focus。

$msex.blur(); // Process raw value.
$msex.find('input[id^="ms-input"]').focus();

如何触发MagicSuggest焦点？

2 个答案: