inputtextview.js 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  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. 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. const bind = this.bindTemplate;
  50. this.setTemplate( {
  51. tag: 'input',
  52. attributes: {
  53. type: 'text',
  54. class: [
  55. 'ck-input',
  56. 'ck-input-text'
  57. ],
  58. id: bind.to( 'id' ),
  59. placeholder: bind.to( 'placeholder' ),
  60. readonly: bind.to( 'isReadOnly' ),
  61. value: bind.to( 'value' )
  62. }
  63. } );
  64. }
  65. /**
  66. * Moves the focus to the input and selects the value.
  67. */
  68. select() {
  69. this.element.select();
  70. }
  71. /**
  72. * Focuses the input.
  73. */
  74. focus() {
  75. this.element.focus();
  76. }
  77. }