Menu
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/components/input-controls/text-field/
Thanks
431
activateFocus is used with MDCTextFieldFoundation when creating a component 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.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>
<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.
121
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
