我正在努力解决一些问题。希望很多老板都在这里等待堆栈溢出，以帮助我解决这些问题。
要求：我希望在整个表单项目中，像Tab键一样，按Enter键可以进入下一个元素，而Enter + Shift键则可以使元素向后移动。
就像我写代码一样，它像一个迷人的英雄一样工作。但是，当我使用Select2以普通的CSS类定义它的形式多次插入时，它无法按我需要的方式工作。
问题：在按下输入键时不会聚焦和关闭，并且在选择一个项目时不会转到下一个元素。
我在这里看到很多类似的参考文献，但没有解决。
<script type="text/javascript">
//slect2 initialize here
$(document).ready(function() {
$(".chosenCommon").select2({ width: '100%' });
});
// Catch the keydown for the entire document
$(document).keydown(function(e) {
// Set self as the current item in focus
var self = $(':focus'),
// Set the form by the current item in focus
form = self.parents('form:eq(0)'),
focusable//,
// next
;
// Array of Indexable/Tab-able items
focusable = form.find('input:not([type="submit"],[type="reset"]),select,button,textarea,div[contenteditable=true]').filter(':visible:not([hidden],[readonly],[disabled], #save_btn, #update_btn, #delete_btn, #reset_btn):enabled');
//next = focusable.eq(focusable.index(self)+1);
//alert(focusable.length);
function enterKey()
{
if (e.which === 13 && !self.is('textarea'))
{
// [Enter] key
// If not a regular hyperlink/button/textarea
if ( $.inArray(self, focusable) && (!self.is('a,button')) )
{
// Then prevent the default [Enter] key behaviour from submitting the form
e.preventDefault();
} // Otherwise follow the link/button as by design, or put new line in textarea
// Focus on the next item (either previous or next depending on shift)
var total = focusable.length;//alert(total);
var index = focusable.index(self);
if(e.shiftKey)
{
if(index > 0)
{
focusable.eq(index-1).focus();
}else{
focusable.eq(index).focus();
}
}else{
if(index < total)
{
focusable.eq(index+1).focus();
}else{
focusable.eq(index+total).focus();
}
// problem: slect an i tem from dropdown by pressing enter key it is not go to nex element
// alert(index);// -1
if(index==-1)
{
// what to do
}
}
//focusable.eq( index + (e.shiftKey ? (index > 0 ? -1 : 0 ) : (index < total ? +1 : total ) ) ).focus();
//console.log(focusable);
if( (total-1) == index)
{
//$("#save_btn").click();
//form.submit();
}
return false;
}
}
// We need to capture the [Shift] key and check the [Enter] key either way.
if (e.shiftKey) { enterKey() } else { enterKey() }
});
</script>
<form action="#">
First name: <input type="text" name="FirstName" value="Mickey"><br>
Last name: <input type="text" name="LastName" value="Mouse"><br>
<select class="chosenCommon" name="fruits">
<option value="1">Banana</option>
<option value="2">Orange</option>
<option value="3">Mango</option>
</select>
Full name: <input type="text" name="FullName" id="FullName" value="Mickey Mouse"><br>
<input type="text" name="" id="address">
<select class="chosenCommon" name="cities">
<option value="1">Dhaka</option>
<option value="2">Chittagon</option>
<option value="3">Rajshahi</option>
<option value="3">Khulna</option>
</select>
<input type="submit" value="Save" id="save_btn">
</form>
答案 0 :(得分：2)
尝试一下
public class WebSocketClient {
private boolean pushLock;
private Gson gson;
private Queue<CacheContainer> queue = new ConcurrentLinkedQueue<>();
WebSocketClient(MyQuery query, CacheHandler cacheHandler) {
pushLock = true;
this.gson = GsonFactory.getGson(query, cacheHandler);
}
public synchronized boolean isPushLock() {
return pushLock;
}
public synchronized void pushUnlock() {
pushLock = false;
}
public Gson getGson() {
return gson;
}
public Queue<CacheContainer> getQueue() {
return queue;
}
public boolean hasBackLog() {
return !queue.isEmpty();
}
}
public class MyConnectionCallback implements WebSocketConnectionCallback {
private final Map<WebSocketChannel, WebSocketClient> clients = new ConcurrentHashMap<>();
private final BlockingQueue<CacheContainer> messageQueue = new LinkedBlockingQueue<>();
private final Gson queryGson = new GsonBuilder().disableHtmlEscaping().create();
private final CacheHandler cacheHandler;
MyConnectionCallback(CacheHandler cacheHandler) {
this.cacheHandler = cacheHandler;
Thread pusherThread = new Thread(() -> {
boolean hasPushLock = false;
while (true) {
if (messageQueue.isEmpty() && hasPushLock) hasPushLock = pushToAllClients(null);
else hasPushLock = pushToAllClients(messageQueue.take());
}
}, "PusherThread");
pusherThread.start();
}
@Override
public void onConnect(WebSocketHttpExchange webSocketHttpExchange, WebSocketChannel webSocketChannel) {
webSocketChannel.getReceiveSetter().set(new AbstractReceiveListener() {
@Override
protected void onFullTextMessage(WebSocketChannel channel, BufferedTextMessage message) throws IOException {
MyQuery query = new MyQuery(queryGson.fromJson(message.getData(), QueryJson.class));
WebSocketClient clientConfig = new WebSocketClient(query, cacheHandler);
clients.put(webSocketChannel, clientConfig);
push(webSocketChannel, clientConfig.getGson(), cacheHandler.getCache());
clientConfig.pushUnlock();
}
});
webSocketChannel.resumeReceives();
}
void putMessage(CacheContainer message) {
messageQueue.put(message);
}
private synchronized void push(WebSocketChannel webSocketChannel, Gson gson, CacheContainer message) throws IOException {
try (ByteArrayOutputStream baos = new ByteArrayOutputStream();
JsonWriter jsonWriter = new JsonWriter(new OutputStreamWriter(baos, StandardCharsets.UTF_8))) {
gson.toJson(message, CacheContainer.class, jsonWriter);
jsonWriter.flush();
if (baos.size() > 2) {
WebSockets.sendText(ByteBuffer.wrap(baos.toByteArray()), webSocketChannel, null);
}
}
}
private synchronized boolean pushToAllClients(CacheContainer message) {
AtomicBoolean hadPushLock = new AtomicBoolean(false);
Set<WebSocketChannel> closed = new HashSet<>();
clients.forEach((webSocketChannel, clientConfig) -> {
if (webSocketChannel.isOpen()) {
if (clientConfig.isPushLock()) {
hadPushLock.set(true);
clientConfig.getQueue().add(message);
} else {
try {
if (clientConfig.hasBackLog())
pushBackLog(webSocketChannel, clientConfig);
if (message != null)
push(webSocketChannel, clientConfig.getGson(), message);
} catch (Exception e) {
closeChannel(webSocketChannel, closed);
}
}
} else {
closed.add(webSocketChannel);
}
});
closed.forEach(clients::remove);
return hadPushLock.get();
}
private void pushBackLog(WebSocketChannel webSocketChannel, WebSocketClient clientConfig) throws IOException {
while (clientConfig.hasBackLog()) {
push(webSocketChannel, clientConfig.getGson(), clientConfig.getQueue().poll());
}
}
private void closeChannel(WebSocketChannel channel, Set<WebSocketChannel> closed) {
closed.add(channel);
channel.close();
}
}
和e.keyCode已过时。您应该使用e.which。 see here
e.key === "Enter"更新后的答案
这将捕获$('body').on('keydown', 'input, select', function(e) {
if (e.shiftKey) {
if (e.key === "Enter") {
var self = $(this),
form = self.parents('form:eq(0)'),
focusable, next;
focusable = form.find('input,a,select,button,textarea').filter(':visible');
next = focusable.eq(focusable.index(this) - 1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
}
if (e.key === "Enter") {
var self = $(this),
form = self.parents('form:eq(0)'),
focusable, next;
focusable = form.find('input,a,select,button,textarea').filter(':visible');
next = focusable.eq(focusable.index(this) + 1);
if (next.length) {
next.focus();
} else {
form.submit();
}
return false;
}
});
中的回车键事件
select2