8
0

inputtextview.js 1.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. /**
  2. * @license Copyright (c) 2003-2017, 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. /**
  10. * The text input view class.
  11. *
  12. * @extends module:ui/view~View
  13. */
  14. export default class InputTextView extends View {
  15. /**
  16. * @inheritDoc
  17. */
  18. constructor( locale ) {
  19. super( locale );
  20. /**
  21. * The value of the input.
  22. *
  23. * @observable
  24. * @member {String} #value
  25. */
  26. this.set( 'value' );
  27. /**
  28. * The `id` attribute of the input (i.e. to pair with a `<label>` element).
  29. *
  30. * @observable
  31. * @member {String} #id
  32. */
  33. this.set( 'id' );
  34. /**
  35. * The `placeholder` attribute of the input.
  36. *
  37. * @observable
  38. * @member {String} #placeholder
  39. */
  40. this.set( 'placeholder' );
  41. /**
  42. * Controls whether the input view is in read-only mode.
  43. *
  44. * @observable
  45. * @member {Boolean} #isReadOnly
  46. */
  47. this.set( 'isReadOnly', false );
  48. const bind = this.bindTemplate;
  49. this.setTemplate( {
  50. tag: 'input',
  51. attributes: {
  52. type: 'text',
  53. class: [
  54. 'ck-input',
  55. 'ck-input-text'
  56. ],
  57. id: bind.to( 'id' ),
  58. placeholder: bind.to( 'placeholder' ),
  59. readonly: bind.to( 'isReadOnly' )
  60. }
  61. } );
  62. }
  63. /**
  64. * @inheritDoc
  65. */
  66. render() {
  67. super.render();
  68. // Note: `value` cannot be an HTML attribute, because it doesn't change HTMLInputElement value once changed.
  69. this.on( 'change:value', ( evt, propertyName, value ) => {
  70. this.element.value = value || '';
  71. } );
  72. }
  73. /**
  74. * Moves the focus to the input and selects the value.
  75. */
  76. select() {
  77. this.element.select();
  78. }
  79. /**
  80. * Focuses the input.
  81. */
  82. focus() {
  83. this.element.focus();
  84. }
  85. }