Javascript：文本区域最后一个字符未大写答案

【问题标题】：Javascript: Text area last character is not being capitalizedJavascript：文本区域最后一个字符未大写
【发布时间】：2019-06-03 19:13:48
【问题描述】：

编辑 Shopify 应用。除非您在文本区域之外单击，否则文本区域中的最后一个字符不会在标签图片上大写。

$(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>

【问题讨论】：

您的代码在最新的 Firefox/Windows 中按预期工作。
也许 Shopify 正在以某种方式“帮助”您？
代码也适用于最新的 Chrome/Windows。
不使用javascript，你就不能在textarea 中添加一个text-transform: uppercase; 样式吗？
@zgood 我已经尝试将其添加到文本区域样式中，它只会更改文本区域中的文本，而不是标签图像上的文本。

标签： javascript html css shopify

【解决方案1】：

您可能正在寻找与keyup 不同的事件。 input 最适合您尝试做的 imo。

$(function() {
    $('#cstedit-addembossing').on("input", function() {
        this.value = this.value.toUpperCase();
    });
});

【讨论】：

是的！惊人的。非常感谢:)

【解决方案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>

要解决这个问题，请执行以下操作：

// 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>

【讨论】：