CODEWITHSUNDEEP
javascriptreactjsregex
Sougata Mukherjee
Sougata Mukherjee

Reputation: 603

how to remove white space from first and last in react

I don't want any space before the input and after the input like " text" and "text " does not allow so I replace the white space but when we copy "text " from notepad and paste over the input and want to remove the space it throws error like "can not read property of undefined reading target".so how to do like when user give space front and back its automatically replace whitespace

  const handleKeyDown = (e) => {
    if (e.key === " ") {
      e.preventDefault();
    }
    
  };
  const handleChangeWhiteSpace = (e) => {
    if (e.target.value.includes(" ")) {
      e.target.value = e.target.value.replace(/\s/g, "");
    }
  };

<MyInput
                          type="text" style={{width:'240px'}}
                          error={formik.errors.input && formik.touched.input}
                          value={formik.values.input}
                          onBlur={formik.handleBlur}
                          onChange={(e)=>{formik.handleChange(e);handleChangeWhiteSpace()}}
                          onKeyDown={handleKeyDown}
                          name="input"
                          id="input"
                          autoFocus={false}
                          autoComplete="off"
/>

Upvotes: 1

Views: 15015

Answers (5)

G Ganesh
G Ganesh

Reputation: 99

We can use to remove white spaces at start and end using trimStart() and trimEnd().

 e.target.value = e.target.value.trimStart().trimEnd();

Upvotes: 0

rnwed_user
rnwed_user

Reputation: 1660

To dont allow to send only spaces you can use normalize prop

<MyInput
   type="text" style={{width:'240px'}}
   normalize={(value) => value.trimStart()}
   error={formik.errors.input && formik.touched.input}
   value={formik.values.input}

and then you can remove all of the spaces inside of this function

const onFinish = (values) => {
 //values.input1=values.input1.trim() or whatever
}

btw this function you can use to remove all the spaces

const remove = (str) => str.trim().replace(/\s\s+/g, ' ')

Upvotes: 0

Kanti Lal
Kanti Lal

Reputation: 11

use normalize={(value, prevVal, prevVals) => value.trimStart()} after rules{[]} in form.item

for prevent whitespace before value in antd input

for example check selected code in image ==> enter image description here

Upvotes: 1

Absolute Zero
Absolute Zero

Reputation: 61

Replace

  const handleChangeWhiteSpace = (e) => {
    if (e.target.value.includes(" ")) {
      e.target.value = e.target.value.replace(/\s/g, "");
    }
  };

With this

  const handleChangeWhiteSpace = (e) => {
      e.target.value = e.clipboardData.getData('Text').trim();
  };

To register changes when you paste text inside the text field use the onPaste event

onPaste={handleChangeWhiteSpace}

Final Code

  const handleKeyDown = (e) => {
    if (e.key === " ") {
      e.preventDefault();
    }
    
  };
  const handleChangeWhiteSpace = (e) => {
      e.target.value = e.target.value.trim();
  };

<MyInput
                          type="text" style={{width:'240px'}}
                          error={formik.errors.input && formik.touched.input}
                          value={formik.values.input}
                          onBlur={formik.handleBlur}
                          onPaste={handleChangeWhiteSpace}
                          onChange={(e)=>{formik.handleChange(e);
                          handleChangeWhiteSpace()}}
                          onKeyDown={handleKeyDown}
                          name="input"
                          id="input"
                          autoFocus={false}
                          autoComplete="off"
/>

Upvotes: 1

M-Raw
M-Raw

Reputation: 839

using regex the following should work, you can test it at regex101:

e.target.value = e.target.value.replace(/^[ \t]+|[ \t]+$/gm, "");

the cleaner solution would be what sojin suggested

e.target.value = e.target.value.trim()

Upvotes: 3

Related Questions