at.js插件的问题
提问于 2016-06-22 02:32:33
我使用的是at.js插件，一切都很好，希望在显示下拉菜单时使用箭头键的时候。此时，它会聚焦第二个列表，并隐藏下拉列表。
我知道问题在于我使用JQuery浏览列表，但是有什么方法可以防止这种情况发生呢？
提前感谢！
var li = $('li.test');
var liSelected;
$(document).keydown(function(e) {
if (e.which === 40) {
e.preventDefault();
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected');
}
} else {
liSelected = li.eq(0).addClass('selected');
}
} else if (e.which === 38) {
e.preventDefault();
if (liSelected) {
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
// liSelected = li.last().addClass('selected');
}
} else {
// liSelected = li.last().addClass('selected');
}
}
$('li.selected .single-line').focus();
});
$('.single-line').atwho({
at: "@",
data:['Person1', 'Person2', 'Person3', 'Person4']
}).atwho-view {
position:absolute;
top: 0;
left: 0;
display: none;
margin-top: 18px;
background: white;
color: black;
border: 1px solid #DDD;
border-radius: 3px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
min-width: 120px;
z-index: 11110 !important;
}
.atwho-view .atwho-header {
padding: 5px;
margin: 5px;
cursor: pointer;
border-bottom: solid 1px #eaeff1;
color: #6f8092;
font-size: 11px;
font-weight: bold;
}
.atwho-view .atwho-header .small {
color: #6f8092;
float: right;
padding-top: 2px;
margin-right: -5px;
font-size: 12px;
font-weight: normal;
}
.atwho-view .atwho-header:hover {
cursor: default;
}
.atwho-view .cur {
background: #3366FF;
color: white;
}
.atwho-view .cur small {
color: white;
}
.atwho-view strong {
color: #3366FF;
}
.atwho-view .cur strong {
color: white;
font:bold;
}
.atwho-view ul {
/* width: 100px; */
list-style:none;
padding:0;
margin:auto;
max-height: 200px;
overflow-y: auto;
}
.atwho-view ul li {
display: block;
padding: 5px 10px;
border-bottom: 1px solid #DDD;
cursor: pointer;
/* border-top: 1px solid #C8C8C8; */
}
.atwho-view small {
font-size: smaller;
color: #777;
font-weight: normal;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Caret.js/0.3.1/jquery.caret.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/at.js/1.5.0/js/jquery.atwho.min.js"></script>
<div id = 'main'>
<ul>
<li class="test"><div id = 'n1' contenteditable=true class="single-line">Pres @ character</div></li>
<li class="test"> <div id = 'n2' contenteditable=true class="single-line">Test</div></li>
<li class="test"> <div id = 'n3' contenteditable=true class="single-line"> Content 3</div></li>
<li class="test"> <div id = 'n4' contenteditable=true class="single-line"> Content 4</div></li>
</ul>
</div>
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-06-22 03:07:27
这可能有助于理解你的代码所做的.
也许你觉得那是在做别的事。
参见代码中的注释。
var li = $('li.test');
var liSelected;
$(document).keydown(function(e) {
if (e.which === 40) {
e.preventDefault();
if (liSelected) { // Undefined on first keydown, Always equals li.eq[0] rest of the time.
liSelected.removeClass('selected');
next = liSelected.next();
if (next.length > 0) { // Will NEVER be more than zero since .next selects one element.
liSelected = next.addClass('selected');
} else {
liSelected = li.eq(0).addClass('selected'); // So you define it to your first li here too.
}
} else {
liSelected = li.eq(0).addClass('selected'); // liSelected is defined here on first keydown only.
} // li.eq[0] is you first li, the one with id = 'n1'
} else if (e.which === 38) {
e.preventDefault();
if (liSelected) { // Exact same comments as above for this part.
liSelected.removeClass('selected');
next = liSelected.prev();
if (next.length > 0) {
liSelected = next.addClass('selected');
} else {
// liSelected = li.last().addClass('selected');
}
} else {
// liSelected = li.last().addClass('selected');
}
}
$('li.selected .single-line').focus();
});正如我在评论中所说的，箭头已经可以在at.js中使用了。
由于liSelected未定义，if条件将导致false。
在.eq() here上阅读
第二版编辑
这里有个有用的东西.
$(".single-line").on("focus", function () {
$(".single-line").removeClass("selected"); // Clear all other "selected" class
$(this).addClass("selected"); // Add "selected" class on focus... And on the editable div instead of on a li
});
var triggers = ["@", ":"];
$(".single-line").keydown(function (e) {
console.log(e.which); // usefull console.log
var current = $(this);
var opened = current.find(".atwho-query");
var flag = !!$.inArray(opened.html(), triggers);
if (!flag) {
console.log("query openned");
} else {
console.log("query closed");
if (e.which === 40) { // Arrow down
console.log("arrow down");
current.parent().next().children(".single-line").focus(); // Set focus on next li.
}
if (e.which === 38) { // Arrow up
console.log("arrow up");
current.parent().prev().children(".single-line").focus(); // Set previous on next li.
}
}
});
// This was your code
$('.single-line').atwho({
at : "@",
data : ['Person1', 'Person2', 'Person3', 'Person4']
})Stack Overflow用户
发布于 2016-06-22 04:22:27
这样使用At.js 事件：
var isOpenAt = false;
$('.single-line').atwho({
at : "@",
data : ['Person1', 'Person2', 'Person3', 'Person4']
}).on("shown.atwho", function (event, flag, query) {
isOpenAt = true;
}).on("hidden.atwho", function (event, flag, query) {
isOpenAt = false;
});这不是最好的解决办法，但这是可行的。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/37965418
复制
腾讯云开发者
