Как активировать фокус на текстовом поле веб-компонента дизайна материала? - PullRequest
Новая
       39

Как активировать фокус на текстовом поле веб-компонента дизайна материала?

0 голосов
/ 29 октября 2018

У меня есть этот код 

    this.mdc_text = mdc.textField.MDCTextField.attachTo(this.$el);
    if (this.autofocus) {
        this.mdc_text.activateFocus();
    }

но функция activFocus не определена. Как мне это сфокусировать?

https://material.io/develop/web/components/input-controls/text-field/

Спасибо

1 Ответ

0 голосов
/ 30 октября 2018

activateFocus используется с MDCTextFieldFoundation при создании компонента для каркаса. В вашем случае похоже, что вы пытаетесь программно сфокусировать текстовое поле MDC, поэтому вам просто нужно выбрать элемент input (а не оболочку div) и использовать focus().

РЕДАКТИРОВАТЬ: MDC с тех пор добавил метод focus, но на момент этого редактирования он, кажется, не работает в большинстве браузеров, включая Chrome и Firefox. Кроме того, описанный выше метод больше не работает (на момент первоначального ответа он работал только в Chrome). Вы можете получить доступ к методу activateFocus через его свойство foundation_ после создания экземпляра компонента, но метод activateFocus активирует только стили для состояния фокуса компонента MDC без фактической установки фокуса, положения курсора и т. Д. На input элемент. Фрагмент отредактирован для демонстрации. 

const field = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));

// input focus method according to docs but doesn't seem to work
field.focus();

// activates MDC focus state styles across browsers but does not actually focus input, set cursor, etc
field.foundation_.activateFocus();
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Material TextField</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
    <link href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css" rel="stylesheet">
    <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>   
  </head>

  <body>
  
    <div class="mdc-text-field">
      <input type="text" id="my-text-field" class="mdc-text-field__input">
      <label class="mdc-floating-label" for="my-text-field">Hint text</label>
      <div class="mdc-line-ripple"></div>
    </div>
    
  </body>
</html>

Кроме того, если вы хотите, чтобы TextField автоматически фокусировался на загрузке страницы, то вы можете добавить атрибут autofocus к элементу input в вашем html.

...