0
MagicSuggest 예제에서 구성 요소 또는 구성 요소 탭을 클릭하면 구성 요소의 스타일이 변경됩니다 (구성 요소 주변의 파란색 테두리와 키보드 커서가 입력 필드에 있음). 프로그래밍 방식으로 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();
});
당신은 정확하게 사용자가 생성 한 이벤트처럼 행동 것 DOM 이벤트를 해고 정말 오래된 없다,이 때문에 _trusted events_이라고 무엇이며, DOM 사양에 지정된 시도 당신은 비록 당신의 경우에, 나는 musicsuggest에 익숙하지 않다) 필요가 없을지도 모른다. –