React catch and remove line breaks or new line when pasting into input field

Question

My input field is just an input field and not an input box and the inherited fact that you can't create new lines inside it is what I want and as intended.

I'm foolproffing my app.

If a Jhon Dumb ctrl-V's text containing a new line (OR ANY OTHER CONTENT THAN MY RULESET) how do I prevent it from triggering update events and fall into the !== '' case?

RULESET :

 const validator = /^(?!.*\.\.)(?!.*\-\-)(?!.*\.$)[^\W\_][A-Z0-9\.\-\_]{0,50}$/igm;
 const allow = validator.test(inputValue);
 if (allow) {
 ...do stuff
 }

I've tried this (placed above validator) :

const inputValue = event.target.value.replace(/\n/g, '').toUpperCase();

which I picked up from here : regex - replace multi line breaks with single in javascript

but inputValue, after going through it was still not === '' (and as it happens valid) so the UpdateInput code still got executed.

if it executes with content it can display that's fine.

but right now the result is that the user gets visual feedback that his input is updating but it's content is empty. (obviously. but I can't say who's intervening here and how we're getting from MY_INPUT\n to ====> (as a matter of fact I'm curious to know why it's doing that) ).

Perhaps this is react already filtering out incorrect input but in that case I need a way to prevent any code from executing at all.

Ideally though I'd "correct" the user input, though.

TO CLARIFY :

this is ONLY in a CTRL-V scenario. enter key does nothing when you are just typing into the input as intended.

thanks!

JR Halchak · Accepted Answer · 2017-10-18 13:57:37Z

2

Input elements should already strip \n from any text.

From MDN

A single-line text field. Line-breaks are automatically removed from the input value.

If the problem is that you're checking against '' and it's failing, then perhaps you need to use the .trim() method.

if (inputValue.trim() !== '') {}

Which could be shortened like: if (!inputValue.trim()) since empty string is falsey, if that matches your style.

answered Oct 18, 2017 at 13:57

JR Halchak

6971 gold badge5 silver badges14 bronze badges

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

Collectives™ on Stack Overflow

React catch and remove line breaks or new line when pasting into input field

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related