Question

我在Angular 5中有以下代码：

<select class="abc" (change)="items($event)"  required>

            <option value="1">1</option>
              <option value="2">2</option>
                <option value="3">3</option>
                  <option value="4">4</option>
                    <option value="5">5</option>
          </select>

当用户选择上述任何特定选项时，焦点将转到所选选项。我试图让任何选定的选项失焦（在用户选择任何选项之后），并希望将焦点转移到DOM的不同元素（如果需要）。我试过了getElementById with focus()，但似乎没有用。

items(event)
  {
    ABC Code;
    Shifting focus code goes here;
  }

Answer 1

以下是使用 Renderer2

的Angular方式的工作解决方案

<强> HTML：

<select class="abc" (change)="change()"  required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>


<input type="text" id="myInput">
<input type="text">

<强>组件：

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  constructor(public renderer2: Renderer2){

  }

  change(){
     let onElement = this.renderer2.selectRootElement('#myInput');
 onElement.focus();
  }

 }

Here is a working DEMO

Answer 2

假设您的不同元素是：

<input type="text" #inputText>

然后你可以试试这个：

<select class="abc" (change)="inputText.focus()"  required>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

Answer 3

这是标准的Javascript，你可以看到它的工作原理，如果你有错误，你需要提供一个沙箱来重现所述错误。伪代码不足以识别问题。

function focusInput(value) {
  document.querySelector('input#input-' + value).focus();
}

<select onchange="focusInput(this.value)" palceholder="select an input to focus">
  <option value="0">Input 0</option>
  <option value="1">Input 1</option>
  <option value="2">Input 2</option>
</select>

<input type="text" id="input-0" placeholder="Input 0" style="display: block;">
<input type="text" id="input-1" placeholder="Input 1" style="display: block;">
<input type="text" id="input-2" placeholder="Input 2" style="display: block;">

移动焦点（） - 角度5

3 个答案: