如何使用左箭头键从输入框导航到跨度

Question

请你帮忙解决下面提到的问题。

按左箭头键如何从输入框（具有id #searchinput）导航到跨度（具有id #selectedFilters）。

<div id="selectedFiltersSearchBox">
<form class="form-horizontal ng-valid ng-dirty ng-valid-parse ng-submitted" role="form">
    <span id="selectedFilters" style="display: inline;"><a class="label label-default firstlabel ng-scope">Corporate<span class="glyphicon glyphicon-remove" ng-click="RemoveFilter1(0)"></span></a> <a class="label label-default  ng-scope">RMEA<span class="glyphicon glyphicon-remove" ng-click="RemoveFilter1(1)"></span></a> <a class="label label-default  ng-scope">Internal<span class="glyphicon glyphicon-remove" ng-click="RemoveFilter1(2)">X</span></a></span>
    <span class="form-horizontal">
        <input type="text" class="form-control ng-valid ng-not-empty ng-dirty ng-valid-parse ng-touched" id="searchinput" ng-focus="getSearchboxFocus()" ng-blur="getSearchboxBlur()" ng-keydown="removeTagOnBackspace($event); specialKeyControl($event)" data-ng-model="SearchText" ng-model-options="{ updateOn: 'default blur', debounce: { 'default':400, 'blur': 0 } }" name="SearchText" autocomplete="off" placeholder="How can I help you?" onkeyup="Expand(this);" ng-class="{textBoxWidth: changeWidthSearch()}" size="20">
    </span>
    <span id="searchclear" style="display: block;"></span>
</form>
<div class="clear"></div>

另请遵循JS Fiddle

Answer 1

您可以通过添加span来使tabindex成为焦点。

function leftArrow(e) {
  var event = window.event ? window.event : e;
  if (event.keyCode === 37) {
    var last = document.getElementById('last');
    last.focus();
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(last.childNodes[0], last.childNodes[0].textContent.length);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

function removeTag(e) {
  var event = window.event ? window.event : e;
  if (event.keyCode === 8) {
    var last = event.target;
    var prev = last.previousElementSibling || last.nextElementSibling;
    last.parentNode.removeChild(last);
    if(!prev){
      document.getElementById('searchinput').focus();
      return;
      }
    prev.setAttribute('contenteditable', 'true');
    prev.setAttribute('id','last');
    prev.focus();
  }
  if (event.keyCode === 37) {
    var last = event.target.previousSibling;
    last.focus();
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(last.childNodes[0], last.childNodes[0].textContent.length);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
  if (event.keyCode === 39) {
    var last = event.target.nextSibling;
    last.focus();
    var range = document.createRange();
    var sel = window.getSelection();
    range.setStart(last.childNodes[0], last.childNodes[0].textContent.length);
    range.collapse(true);
    sel.removeAllRanges();
    sel.addRange(range);
  }
}

#searchinput {
  border-radius: 0;
  height: 38px;
  border: medium none;
  box-shadow: none;
  /*width: 94%;* Commented for New Search Box Design*/
  width: auto;
  max-width: 100%;
  padding: 0 50px 0 0;
}
#selectedFiltersSearchBox {
  border: 1px solid rgb(204, 204, 204);
  /*box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
	background: #ffffff url("../images/searchBg.png") repeat-y scroll right top;	*/
  padding: 2px;
  position: relative;
}
#selectedFilters,
#selectedFilterserr {
  float: left;
  padding: 5px 10px 0 2px;
  display: none;
  /*max-width:23%;* COmmented for New Search Design*/
  width: auto;
  margin-right: 10px;
}
#selectedFilters:focus {
  border: 1px solid red;
}

<span id="selectedFilters" tabindex="0" style="display: inline;"><a tabindex="0" onkeydown="removeTag()" class="label label-default firstlabel ng-scope">Corporate<span class="glyphicon glyphicon-remove"></span>
</a><a tabindex="0" onkeydown="removeTag()" class="label label-default  ng-scope">RMEA<span class="glyphicon glyphicon-remove" ></span></a><a tabindex="0" onkeydown="removeTag()" contenteditable="true" id="last" class="label label-default  ng-scope">Internal<span class="glyphicon glyphicon-remove" ></span></a>
</span><span class="form-horizontal"><input type="text" id="searchinput" name="SearchText" autocomplete="off" placeholder="How can I help you?" onkeydown="leftArrow()" size="20"> 
            </span>