how to remove trailing and leading spaces from textbox input

Question

if I have something like this:

  return array.map(item => (
<input type="text" value={item.name}> onChange ={(name) => changeItemName(name.target.value)}

where the changeItemName function is basically a function that will change the name attribute of the current item. How can I go about making sure that the name attribute wont have any trailing or leading spaces? I can do something like this in my changeItemName function:

changeItemName(name){
name.trim()
... logic to change name of item }

However since I am using onChange() , this method is called everytime a character is typed. This means that if a user types a regular space between 2 words, this wouldnt work because the name passed into the function would be trimmed thus now allowing any spaces. How can I tweak this so that spaces still work but leading and trailing white spaces are gone?

Answer 1

You can trim the name when the user finished typing. For example when the input got out of focus. Try this:

<input type="text" value={item.name}>
    onChange ={(name) => changeItemName(name.target.value)}
    onBlur={()=> { item.name = item.name.trim() }} 
/>

Here the onBlur function would fire when user goes to some other input or other part of your website.

Answer 2

There are several options, one is to use a debouncing function that will trim the input after the user stops typing for a couple hundred milliseconds. The other option is to trim the input on the blur event.