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?

does this give your answer stackoverflow.com/questions/24282158/… — Mohit Sharma
– Mohit Sharma, Commented Jul 6, 2022 at 17:00

Hossein hossein · Accepted Answer · 2022-07-06 17:04:42Z

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.

answered Jul 6, 2022 at 17:04

Hossein hossein

1474 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aj soprano Over a year ago

This works but wouldnt this mutate the state of item?

Hossein hossein Over a year ago

I'm not sure what do you mean by mutate. If you mean change the state of the item well yes. It only changes the name but if there is a useEffect (or any part of the app) that reruns when you change the item, it would run when onBlur runs..

Andrei · Accepted Answer · 2022-07-06 17:05:01Z

0

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.

answered Jul 6, 2022 at 17:05

Andrei

4,6374 gold badges30 silver badges25 bronze badges

Collectives™ on Stack Overflow

how to remove trailing and leading spaces from textbox input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related