skip to Main Content

Editing a Shopify app. Last character in the text area does not get capitalized on the label picture unless you click outside of text area.

$(function() {
    $('#cstedit-addembossing').keyup(function() {
        this.value = this.value.toUpperCase();
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<textarea maxlength="10" data-area="back" class="customify-text" data-target="addembossing" id="cstedit-addembossing" placeholder="Write a name, special date, quote, and the list goes on"></textarea>

2

Answers


  1. You probably are looking for a different event than keyup. input works best for what you are trying to do imo.

    $(function() {
        $('#cstedit-addembossing').on("input", function() {
            this.value = this.value.toUpperCase();
        });
    });
    
    Login or Signup to reply.
  2. // those listeners are added by customizer-final-v33.js
    foo.addEventListener('change', e => display.textContent = foo.value);
    foo.addEventListener('input', e => display.textContent = foo.value);
    
    // this is basically your listener
    foo.addEventListener('keyup', e => foo.value = foo.value.toUpperCase());
    <textarea id="foo"></textarea>
    <hr />
    <h1 id="display">Type and texarea will update this text.</h1>

    To fix that, here you go:

    // those listeners are added by customizer-final-v33.js
    foo.addEventListener('change', e => display.textContent = foo.value);
    foo.addEventListener('input', e => display.textContent = foo.value);
    
    // this is basically a working version your listener
    foo.addEventListener('keydown', (e) => {
      event.preventDefault();
      foo.value = foo.value + String.fromCharCode(e.keyCode).toUpperCase();
      foo.dispatchEvent(new CustomEvent('input', { bubbles: true }));
    })
    <textarea id="foo"></textarea>
    <hr />
    <h1 id="display">Type and texarea will update this text.</h1>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search