8
0

inputtextview.js 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138
  1. /**
  2. * @license Copyright (c) 2003-2018, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /**
  6. * @module ui/inputtext/inputtextview
  7. */
  8. import View from '../view';
  9. import '../../theme/components/inputtext/inputtext.css';
  10. /**
  11. * The text input view class.
  12. *
  13. * @extends module:ui/view~View
  14. */
  15. export default class InputTextView extends View {
  16. /**
  17. * @inheritDoc
  18. */
  19. constructor( locale ) {
  20. super( locale );
  21. /**
  22. * The value of the input.
  23. *
  24. * @observable
  25. * @member {String} #value
  26. */
  27. this.set( 'value' );
  28. /**
  29. * The `id` attribute of the input (i.e. to pair with a `<label>` element).
  30. *
  31. * @observable
  32. * @member {String} #id
  33. */
  34. this.set( 'id' );
  35. /**
  36. * The `placeholder` attribute of the input.
  37. *
  38. * @observable
  39. * @member {String} #placeholder
  40. */
  41. this.set( 'placeholder' );
  42. /**
  43. * Controls whether the input view is in read-only mode.
  44. *
  45. * @observable
  46. * @member {Boolean} #isReadOnly
  47. */
  48. this.set( 'isReadOnly', false );
  49. /**
  50. * Set to `true` when the field has some error. Usually controlled via
  51. * {@link module:ui/labeledinput/labeledinputview~LabeledInputView#errorText}.
  52. *
  53. * @observable
  54. * @member {Boolean} #hasError
  55. */
  56. this.set( 'hasError', false );
  57. /**
  58. * The `id` of the element describing this field, e.g. when it has
  59. * some error, it helps screen readers read the error text.
  60. *
  61. * @observable
  62. * @member {Boolean} #ariaDesribedById
  63. */
  64. this.set( 'ariaDesribedById' );
  65. const bind = this.bindTemplate;
  66. this.setTemplate( {
  67. tag: 'input',
  68. attributes: {
  69. type: 'text',
  70. class: [
  71. 'ck',
  72. 'ck-input',
  73. 'ck-input-text',
  74. bind.if( 'hasError', 'ck-error' )
  75. ],
  76. id: bind.to( 'id' ),
  77. placeholder: bind.to( 'placeholder' ),
  78. readonly: bind.to( 'isReadOnly' ),
  79. 'aria-invalid': bind.if( 'hasError', true ),
  80. 'aria-describedby': bind.to( 'ariaDesribedById' )
  81. },
  82. on: {
  83. input: bind.to( 'input' )
  84. }
  85. } );
  86. /**
  87. * Fired when the user types in the input. Corresponds to the native
  88. * DOM `input` event.
  89. *
  90. * @event input
  91. */
  92. }
  93. /**
  94. * @inheritDoc
  95. */
  96. render() {
  97. super.render();
  98. const setValue = value => {
  99. this.element.value = ( !value && value !== 0 ) ? '' : value;
  100. };
  101. setValue( this.value );
  102. // Bind `this.value` to the DOM element's value.
  103. // We cannot use `value` DOM attribute because removing it on Edge does not clear the DOM element's value property.
  104. this.on( 'change:value', ( evt, name, value ) => {
  105. setValue( value );
  106. } );
  107. }
  108. /**
  109. * Moves the focus to the input and selects the value.
  110. */
  111. select() {
  112. this.element.select();
  113. }
  114. /**
  115. * Focuses the input.
  116. */
  117. focus() {
  118. this.element.focus();
  119. }
  120. }