#

API Docs for: v2.11.1
Show: Inherited Protected Private Deprecated

# File: packages/ember-glimmer/lib/components/text_field.js

    /**
    @module ember
    @submodule ember-views
    */
    import { EmptyObject } from 'ember-utils';
    import { computed } from 'ember-metal';
    import { environment } from 'ember-environment';
    import Component from '../component';
    import layout from '../templates/empty';
    import { TextSupport } from 'ember-views';

    let inputTypeTestElement;
    const inputTypes = new EmptyObject();
    function canSetTypeOfInput(type) {
      if (type in inputTypes) {
        return inputTypes[type];
      }

      // if running in outside of a browser always return the
      // original type
      if (!environment.hasDOM) {
        inputTypes[type] = type;

        return type;
      }

      if (!inputTypeTestElement) {
        inputTypeTestElement = document.createElement('input');
      }

      try {
        inputTypeTestElement.type = type;
      } catch (e) { }

      return inputTypes[type] = inputTypeTestElement.type === type;
    }

    /**

      The internal class used to create text inputs when the `{{input}}`
      helper is used with `type` of `text`.

      See [Ember.Templates.helpers.input](/api/classes/Ember.Templates.helpers.html#method_input)  for usage details.

      ## Layout and LayoutName properties

      Because HTML `input` elements are self closing `layout` and `layoutName`
      properties will not be applied. See [Ember.View](/api/classes/Ember.View.html)'s
      layout section for more information.

      @class TextField
      @namespace Ember
      @extends Ember.Component
      @uses Ember.TextSupport
      @public
    */
    export default Component.extend(TextSupport, {
      layout,
      classNames: ['ember-text-field'],
      tagName: 'input',
      attributeBindings: [
        'accept',
        'autocomplete',
        'autosave',
        'dir',
        'formaction',
        'formenctype',
        'formmethod',
        'formnovalidate',
        'formtarget',
        'height',
        'inputmode',
        'lang',
        'list',
        'max',
        'min',
        'multiple',
        'name',
        'pattern',
        'size',
        'step',
        'type',
        'value',
        'width'
      ],

      /**
        The `value` attribute of the input element. As the user inputs text, this
        property is updated live.

        @property value
        @type String
        @default ""
        @public
      */
      value: '',

      /**
        The `type` attribute of the input element.

        @property type
        @type String
        @default "text"
        @public
      */
      type: computed({
        get() {
          return 'text';
        },

        set(key, value) {
          let type = 'text';

          if (canSetTypeOfInput(value)) {
            type = value;
          }

          return type;
        }
      }),

      /**
        The `size` of the text field in characters.

        @property size
        @type String
        @default null
        @public
      */
      size: null,

      /**
        The `pattern` attribute of input element.

        @property pattern
        @type String
        @default null
        @public
      */
      pattern: null,

      /**
        The `min` attribute of input element used with `type="number"` or `type="range"`.

        @property min
        @type String
        @default null
        @since 1.4.0
        @public
      */
      min: null,

      /**
        The `max` attribute of input element used with `type="number"` or `type="range"`.

        @property max
        @type String
        @default null
        @since 1.4.0
        @public
      */
      max: null
    });