javascript - How to activate focus on material design web component text field? - Stack Overflow

I have this codethis.mdc_text = mdc.textField.MDCTextField.attachTo(this.$el);if (this.autofocus) {this

I have this code

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

but the function activateFocus is undefined. How can I focus it?

/

Thanks

I have this code

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

but the function activateFocus is undefined. How can I focus it?

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

Thanks

Share Improve this question edited Oct 29, 2018 at 22:40 benvc 15.2k4 gold badges38 silver badges57 bronze badges asked Oct 29, 2018 at 20:48 omegaomega 44.1k90 gold badges286 silver badges523 bronze badges
Add a ment  | 

1 Answer 1

Reset to default 4

activateFocus is used with MDCTextFieldFoundation when creating a ponent for a framework. In your case, it looks like you are trying to programmatically focus an MDC textfield, so use the focus method instead.

const field = mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
field.focus();
<!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./icon?family=Material+Icons">
    <link rel="stylesheet" href="https://fonts.googleapis./css?family=Roboto:300,400,500,700">
    <link href="https://unpkg./material-ponents-web@latest/dist/material-ponents-web.min.css" rel="stylesheet">
    <script src="https://unpkg./material-ponents-web@latest/dist/material-ponents-web.min.js"></script>   
  </head>
  <body>  
    <label class="mdc-text-field mdc-text-field--filled">
      <span class="mdc-text-field__ripple"></span>
      <input class="mdc-text-field__input" type="text">
      <span class="mdc-floating-label">Hint text</span>
      <span class="mdc-line-ripple"></span>
    </label> 
  </body>
</html>

As an aside, if you want a the TextField to be automatically focused on page load, then you can add the autofocus attribute to the input element in your html.

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745582407a4634333.html

相关推荐

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信