Сдвиг фокуса () - Угловой 5
У меня есть следующий код в 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;
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
Предположим, ваш другой элемент таков:
<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>
Это стандартный 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;">Это нормально. если мы используем Селектор запросов в угловом приложении?
Для фокусировки элемента да, это так. Но ничто не мешает вам использовать переменную шаблона, Renderer2 или любой другой способ, предоставляемый Angular. Я просто показываю, что этот простой код работает на любом устройстве.
Вот рабочее решение в Angular с использованием Renderer2
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();
}
}
@Sanket Sawant, пожалуйста, проверьте мой ответ
Привет, Шраван, спасибо за рабочую демонстрацию. Мне действительно нужно переключить внимание на всю DOM, так как я хочу, чтобы scroll bar работал на веб-странице. Что делать в таком случае?
@SanketSawantm, значит, тебя не достало
Например: когда мы перезагружаем любую веб-страницу, где по умолчанию находится focus ()? На каком элементе? Аналогично, что мне делать, чтобы получить этот фокус по умолчанию () на всей веб-странице?
после того, как выбран элемент выбора, фокус по умолчанию перейдет в обычное состояние.
Пробовал, но фокус не смещается