JavaScript UI Libraries & Blazor Components Suite – Smart UI Forums Text Boxes & Inputs Getting current value from smart-multiline-text-box for a character counter.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #102736
    MarkM
    Participant

    I am trying to add a character counter / indicator for a smart multiline textbox control. I want to update my character counter as the user is typing in the text box. What is the best way to accomplish this?  I have tried adding an event handler with the ‘input’ event, as well as the change event listed in the API.

    Both of these events seem to work partially, however when I try to access the current value of the multiline textbox, it does not seem to update with the actual current input until after the control loses focus.  What is the best way to accomplish this and see the current value as it is being entered?

    Here is my current test code using the input event (which does fire with each keystroke – but the length value is incorrect until the texbox focus is lost):

    <p>Add a concise statement (150 or fewer characters):</p>
    <smart-multiline-text-box id=”addStatementTextbox” auto-focus placeholder=”” max-length=”150″ style=”width: 500px; height: 100px;”></smart-multiline-text-box>
    <div class=”characterCounter” id=”statementCharacterCounter”> 0 / 150 characters</div>

    <script type=”text/javascript”>
    (function (generateUI, $, undefined) {
    generateUI.addStatementTextbox = document.getElementById(‘addStatementTextbox’);

    generateUI.init = function () {

    generateUI.addStatementTextbox.addEventListener(“input”, ({ currentTarget: target }) => {
    console.log(“addStatementTextbox.addEventListener input”);
    console.log(“target.value: ” + target.value);
    let currentLength = target.value.length;
    console.log(“currentLength: ” + currentLength);
    });

    };

    #102737
    admin
    Keymaster

    Hi,

    I would suggest you using the Editor component instead which has such built-in functionality – https://www.htmlelements.com/demos/editor/editor-char-counter/

    Best regards,
    Peter Stoev

    Smart UI Team
    https://www.htmlelements.com/

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.