0
我的web應用程序前端遇到了一些問題。有幾個problmes：Safari瀏覽器，Mozila，Chrome中的選項列表無法正常工作
我需要的，如果太長剪切文本，所以我做
。建議箱文本{空白：NOWRAP;溢出：隱藏;
text-overflow：ellipsis; }
但我不能在Chrome中使用滾動，只有鑰匙。 2.無論我使用的是什麼，Safari都會記住列表中最後一個選擇的項目，並且下一次使用選擇時，它將從它開始，而不是從第一個元素開始。
在FireFox中，什麼也不能正常工作，當剪切過長的文本時同樣的事情，滾動仍然有效，但當我用鍵移動時，列表不滾動。
有什麼已知的方法可以解決這個問題嗎？或者只是嘗試嘗試和祝你好運，直到你找到一個工作組合？
HTML文件
<div class="navbar-container container-fluid">
<div class="" id="site-navbar-search">
<form id="originalSearch" role="search" ng-submit="query()">
<div class="form-group" style="margin: 15px 0px 0px 0px">
<div class="input-search">
<speech class=""></speech>
<input id="questionForInput" type="text"
ng-change="ask.getsuggestions()" autocomplete="off"
ng-model="ask.term" class="form-control bg-dark"
placeholder="Ask ..." ng-keydown="key($event)"/>
<select id="suggestionSelection" class="suggestion-box
list-group2 bg-dark" ng-keydown="key2($event)"
multiple="multiple"ng-model="ask.term">
<option class="list-group-item2 suggestion-box-text bg-dark"
ng-repeat="command in ask.suggestions">
{{command.statement}}
</option>
</select>
<button type="submit" style="visibility: hidden; display:none"></button>
</div>
</div>
</form>
</div>
</div>
CSS文件
.suggestion-box {
overflow: auto;
overflow: -moz-scrollbars-auto;
position: absolute;
z-index: 1;
width:100%;
visibility: hidden;
border-radius: 0px 0px 18px 18px;
outline: none;
}
.suggestion-box-text {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
@supports (overflow:-webkit-marquee) and (justify-content:inherit)
{
.suggestion-box {
padding-left: 15px;
}
}
body{
scrollbar-base-color: #C0C0C0;
scrollbar-base-color: #C0C0C0;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-highlight-color: #C0C0C0;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar { width: 0px; height: 0px;}
::-webkit-scrollbar-button { background-color: #666; }
::-webkit-scrollbar-track { background-color: #999;}
::-webkit-scrollbar-track-piece { background-color: #ffffff;}
::-webkit-scrollbar-thumb { height: 0px; background-color: #666; border-radius: 0px;}
::-webkit-scrollbar-corner { background-color: #999;}}
::-webkit-resizer { background-color: #666;}
而且JS文件的一部分
$scope.key = function($event){
if ($event.keyCode == 40) {
$('#suggestionSelection').focus();
$('#suggestionSelection').focus();
//$("select#suggestionSelection").prop('selectedIndex', -1);
//$("#suggestionSelection")[0].selectedIndex = -1;
}
else if($event.keyCode == 27) {
$('#suggestionSelection').css('visibility', 'hidden');
$('#questionForInput').css('border-radius', '200px 200px 200px 200px');
}
}
$scope.key2 = function($event){
console.log($event.keyCode);
if ($event.keyCode == 38) {
if($('#suggestionSelection')[0].selectedIndex == -1 || $('#suggestionSelection')[0].selectedIndex == 0) {
$('#questionForInput').focus();
$('#suggestionSelection').css('visibility', 'hidden');
$('#questionForInput').css('border-radius', '200px 200px 200px 200px');
}
}
else if($event.keyCode == 27 || $event.keyCode == 13) {
$('#questionForInput').focus();
$('#suggestionSelection').css('visibility', 'hidden');
$('#questionForInput').css('border-radius', '200px 200px 200px 200px');
}
}