Counting characters during edit-CodePudding

I have a script that is used to count the number of characters in the input. It works well for the creation, but when it comes to the edit form the problem is that while displaying the old input it shows 0 and only starts counting when I'm starting to add some characters to the input. So I need it to display the number of characters of the old input even if I didn't add any new characters yet. How can I achieve that? HTML code:

<input type="text" name="name"  value="{{ $employee->name }}" placeholder="Name is..." id="myText">
<div >
<span id="wordCount" >0</span>
<span >/</span>
<span >256</span>
</div>

Script:

var myText = document.getElementById("myText");
var wordCount = document.getElementById("wordCount");

myText.addEventListener("keyup",function(){
        var characters = myText.value.split('');
        wordCount.innerText = characters.filter( item => {
            return (item != ' ');
        }).length;
});

CodePudding user response：

Your code needs to be moved into a function so you can trigger it in multiple places. Also your code ignores paste events not done with the keyboard.

I kept word count there name there.... put you are counting letters, not words.

var myText = document.getElementById("myText");
var wordCount = document.getElementById("wordCount");

function setLetterCount() {
  wordCount.innerText = myText.value.replace(/\s/g, '').length;
}

myText.addEventListener("input", setLetterCount);
setLetterCount();

<input type="text" name="name"  value="Funky Chicken" placeholder="Name is..." id="myText">
<div >
<span id="wordCount" >0</span>
<span >/</span>
<span >256</span>
</div>

Other way is to trigger the event with dispatchEvent

var myText = document.getElementById("myText");
var wordCount = document.getElementById("wordCount");

myText.addEventListener("input", function() {
  wordCount.innerText = myText.value.replace(/\s/g, '').length;
});

myText.dispatchEvent(new Event('input', {
  bubbles: true
}));

<input type="text" name="name"  value="Funky Chicken" placeholder="Name is..." id="myText">
<div >
  <span id="wordCount" >0</span>
  <span >/</span>
  <span >256</span>
</div>

CodePudding user response：

var myText = document.getElementById("myText");
var wordCount = document.getElementById("wordCount");

const wordCounterHelper = () => {
    var characters = myText.value.split('');
    wordCount.innerText = characters.filter( item => {
      return (item != ' ');
    }).length;
}

wordCounterHelper()

myText.addEventListener("input", () => {wordCounterHelper()});

<input type="text" name="name"  value="Funky Chicken" placeholder="Name is..." id="myText">
<div >
<span id="wordCount" >0</span>
<span >/</span>
<span >256</span>
</div>

Basically you need to run the code in the event listener once before, cause else it will only be executed once you begin typing in the edit form.

This is best done by putting the code into a function and the calling the function one separate time in the js.

Also I've changed the event to the input event as this fires on any value change of the input and not just keyup

CodePudding user response：

You can achieve this by setting the initial value of the wordCount element to the length of the value attribute of the myText input element, rather than 0. This can be done by adding this line of code before the event listener:

var myText = document.getElementById("myText");
var wordCount = document.getElementById("wordCount");

wordCount.innerText = myText.value.length;

myText.addEventListener("keyup",function(){
        var characters = myText.value.split('');
        wordCount.innerText = characters.filter( item => {
            return (item != ' ');
        }).length;
});

<input type="text" name="name"  value="{{ $employee->name }}" placeholder="Name is..." id="myText">
<div >
<span id="wordCount" >0</span>
<span >/</span>
<span >256</span>
</div>