0

I am performing the following steps: 1- A textarea whose maxlength is 50. 2- A button on click of which text is getting appended to textarea.

Issue: Maxlength validation does not work if keep clicking the button. Don't want to put any check of maxlength on button click.

Is there any textArea eventlistener I can add to put a check if adding data on button click event.

<body>
    <textarea id="test" rows="4" cols="50" maxlength="50">
    </textarea>

    <button onclick="appendData()"> Click </button>

    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function(event) { 
            var txtArea = document.querySelector('textarea');
        });

        document.getElementById('test').addEventListener('change', function(event) {
            alert('inside event listener of textarea 2')
        })

        function appendData(){
            document.querySelector('textarea').value += "hello";
        }

    </script>

</body>

Ferdinando
  • 964
  • 1
  • 12
  • 23
walter
  • 121
  • 5
  • you can get the value before appending text into it – mkamranhamid Sep 08 '19 at 08:04
  • Why do you not want to add a check in the button click handler? – user4520 Sep 08 '19 at 08:37
  • @user4520 Thanks for the response. I cannot add check in the click handler of button because it's a part of reusable component and I cannot add a specific functionality to common component. Is there no such event of textArea? – walter Sep 08 '19 at 08:51
  • @mkamranhamid you mean to say that in click handler of button I can get the value of textArea? Can you please elaborate it? – walter Sep 08 '19 at 08:52
  • Possible duplicate of [Event when input value is changed by JavaScript?](https://stackoverflow.com/questions/42427606/event-when-input-value-is-changed-by-javascript) even though this question is about ` – caramba Sep 08 '19 at 09:16
  • 1
    @walter Can you add your own click handler instead of the existing one which you don't want to update ? – rprakash Sep 08 '19 at 09:22

1 Answers1

0

Any specific reason why you don't want to check/do this in the onclick javascript ? I think there is no such TextArea eventListener which can be used to accomplish this. Other keyboard (onKeyUp, onKeyDown or onKeyPress Events) events can't be used since the value is directly set into the input element (which I believe clients would be using to implement the maxLength functionality when a key is pressed on the keyboard).

This can be done with the size check in the onclick javascript before setting the new value in the textarea.

<html>
<head>
<script>
function hello() {
     var ta = document.getElementById("test"),
         maxlength = ta.maxLength,
         value = ta.value,
         textToAppend = "hello";

     value += "hello";
     totalLen = value.length;
     if (totalLen>maxlength) {
         return false;
     }
     else {
         ta.value = value;
         return true;
     }
}
</script>
</head>
<body>
  <textarea id="test" rows="4" cols="50" maxlength="50">
  </textarea>
  <button onclick="hello();"> Click </button>
</body>
</html>

JSFiddle

This code can be improved to append only a substring if the maxLength check fails only after appending the full string.

rprakash
  • 500
  • 5
  • 10