Text limiter in input and textarea fields

Inspect the full details and code of a selected snippet

<div class="uk-flex-1 uk-flex">
  <div class="uk-container uk-container-small uk-flex-1 uk-flex uk-flex-column uk-margin-medium-top uk-margin-medium-bottom">
    <div class="uk-flex-1 uk-flex uk-flex-column uk-flex-center">
      <div class="uk-width-1-1">
        <div class="uk-text-small uk-text-muted uk-text-uppercase uk-text-semibold uk-margin-small-bottom">Text limiter in input and textarea fields</div>
        <div class="uk-card uk-card-default uk-box-shadow-remove uk-padding-small uk-border-rounded">
          
          <label class="uk-form-label">Textarea field</label>
		  <textarea uk-limiter="textLimit: 120" class="uk-textarea uk-border-rounded uk-height-small uk-width-1-1">Lorem Ipsum is simply</textarea>
          
          <label class="uk-form-label required">Input field</label>
		  <input uk-limiter="textLimit: 10; message: Limited value:; warning: 2; showLimit: true" class="uk-input uk-border-rounded uk-width-1-1" value="" required />
          
        </div>
      </div>
      <div class="uk-text-tiny uk-text-right">made by <b>Antonius</b></div>
    </div>
  </div>
</div>

(function (UIkit) {
  if (!UIkit) {
    throw new Error('UIkit not found. Make sure UIkit is loaded before this plugin.');
  }

UIkit.component('limiter', {
    props: {
      textLimit: Number,
      message: String,
      className: String,
      warning: Number,
      showLimit: Boolean
    },

data: {
      textLimit: 300,
      message: 'Symbols left:',
      className: 'uk-limiter uk-text-muted',
      warning: 10,
      showLimit: false
    },

connected() {
      this.$limitDisplay = UIkit.util.$(`<div class="${this.className}"></div>`);
      UIkit.util.after(this.$el, this.$limitDisplay);
      this.update();
      UIkit.util.on(this.$el, 'input', () => this.update());
    },
    methods: {
      update() {
        let value = this.$el.value;
        let length = value.length;

if (length > this.textLimit) {
          this.$el.value = value.substring(0, this.textLimit);
          length = this.textLimit;
        }

Information

Detailed overview of a selected code snippet

antonius

03.04.2025, 14:25:31

10.04.2025, 14:56:24

uk-border, uk-box, uk-card, uk-container, uk-flex, uk-form, uk-height, uk-input, uk-limiter, uk-margin, uk-padding, uk-text, uk-textarea, uk-width

Comments

Browse user feedback and discussions in detail

Currently in development and will be available soon. Stay tuned for updates!