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