0

查看MagicSuggest示例,当您单击组件或选项卡进入组件时,组件的样式会发生变化(组件周围的蓝色边框和键盘光标位于输入字段中)。您如何以编程方式将焦点放在 MagicSuggest 组件上?

我已经尝试过$(...).focus(),但这并没有提供相同的行为。一些调试指出我需要触发_onInputFocus事件处理程序,但我不能让它以编程方式触发。Using$(...).find('input[id^="ms-input"]').focus()将焦点放在内部输入字段上,但与用户交互的方式不同(组件没有蓝色边框,键盘光标位于Type or click here“空文本”之后)。

下面的示例演示了尝试以编程方式将焦点放在 MagicSuggest 组件上。单击该OK按钮将清除 MagicSuggest 选择,并将焦点放在 MagicSuggest 组件上。

我做错了什么还是MagicSuggest的限制?如果是后者,纠正它的最佳方法是什么?

示例.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>

例子.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

0

尝试这个

if (msControl != undefined) 
{                
   msControl.input.focus();
}
于 2017-01-28T21:18:04.323 回答
-1

通过示例进行调试表明,在处理 OK 按钮单击处理程序后,MagicSuggest 组件被冒泡的单击事件模糊

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

$msex.blur(); // Process raw value.
$msex.find('input[id^="ms-input"]').focus();
于 2013-08-28T18:23:50.480 回答