Tweaks to Input Box

[peter quitzgard]

Hello, I'm wondering if it would be possible to use a script

which adapts an input field, so entered numbers get always

a fixed format? Let's say it is the "Username" from here:

https://testpages.eviltester.com/styled/basic-html-form-test.html

I would need the input (always numeric values) get formatted like this:

1- Remove any empty spaces found, at any positions, like this:

" 123456789" > "12345678"

"1234 5678" > "12345678"

"12345678 " > "12345678"

2- The same as before, but applied to any other kind of characters

but numbers.

"1234567.8" > "12345678"

"1234-5678" > "12345678"

"12345@7e8" > "12345678"

3- Limit the allowed quantity of entered numbers

to "11", as maximum; and alert in case of getting an

amount greater than that.

Thanks.

 

[AutoControl support]

The following script sets the maximum length to 11 and it prevents non-numeric characters from being entered:

let inputElem = document.querySelector('[name=username]') inputElem.maxLength = 11 inputElem.addEventListener('keypress', evt =>{ if( Number.isNaN(parseInt(evt.key)) ) evt.preventDefault() })

Is this what you were trying to achieve?

[peter quitzgard]

That's OK, but I forget to tell you about an important detail,

the same restrictions should be applied to pasted values, since

%99 of the times I will be pasting the values, not typing them manually.

So, let's say I paste values which include at least one empty

space or any other "non digit" character in any position:

 "12 34567891 0" (13 Characters) 

 "12-34567891-0" (13 Characters)

 "12.345.678910" (13 Characters)

 "12/34567/8910" (13 Characters)

 " 12345678910 " (13 Characters)

 "12-34.567.891-0" (15 Characters)

 "12 34.567.891 0" (15 Characters)

 "12345...@blabla.com" (22 Characters)

They should get converted to:

"12345678910" (11 Characters)

"12345678910" (11 Characters)

"12345678910" (11 Characters)

"12345678910" (11 Characters)

"12345678910" (11 Characters)

"12345678910" (11 Characters)

"12345678910" (11 Characters)

"12345678910" (11 Characters)

And in case it is possible, trigger a kind of tooltip alert

when finding a non compliant value, after pasting it as expected.

[peter quitzgard]

Last example's digits format were altered by the Google text editor. It should look like this:

[AutoControl support]

Something like this maybe?

let inputElem = document.querySelector('[name=username]') inputElem.addEventListener('input', evt =>{ let val = evt.target.value.replace(/[^\d]/g, '') evt.target.value = val.substr(0, 11) if( val.length > 11 ) alert('TOO MANY DIGITS!') })

[peter quitzgard]

That's doing the job, but two minor things regarding the alert message:

1- It is being triggered when typing text manually only, not after pasting it.

2- Could that alert be a "click less" one? I mean, one that doesn't require user intervention,

but be an informative one only, which disappears after a few seconds. So, after pasting a

non-compliant value, I am able to see the message, but it doesn't interrupt my workflow

(requiring another click), still letting me keep working with the page normally, disappearing

by itself after a few seconds, or just after I make a click on another element or over the page itself.

[AutoControl support]

1- It is being triggered when typing text manually only, not after pasting it.

Cannot reproduce this on our end. Pasting using both the context menu and CTRL+V triggers the alert.

2- Could that alert be a "click less" one?

 

let inputElem = document.querySelector('[name=username]') inputElem.addEventListener('input', evt =>{ let val = evt.target.value.replace(/[^\d]/g, '') evt.target.value = val.substr(0, 11) if( val.length > 11 ) evt.target.style.cssText = 'background: red' else evt.target.style.removeProperty('background') })

[peter quitzgard]

1- Almost there. It seems there are still a few combinations

that for some reason, won't trigger the alert after being pasted:

https://gofile.io/d/6e8T8J

But it's alright if you couldn't figure out why, since the most important part

which deals with trimming the unneeded characters is being done correctly.

2- OK.

[AutoControl support]

None of the 3 examples in the video exceed the limit of 11 digits, therefore the alert is not shown.

The alert is shown only if the entered text contained more than 11 digits. This is according to your rule #3:

"Limit the allowed quantity of entered numbers to "11", as maximum; and alert in case of getting an amount greater than that."

[peter quitzgard]

Alright, I forgot the script cares about only "digits" in order to show the notifications.

Thanks for all.

[Youtube Dot com]

Hello 

[peter quitzgard]

Hello, I'm wondering if would it be possible to send an "Enter" key to an input box (text field),

after a value was inserted? So, to avoid have to press that key, or a equivalent website's button

each time. Let's say, the "Enter" key gets triggered on the field, after one second later a given 

value was inserted (pasted). And, if possible, doing that only when values are pasted, not typed.

Thanks.

[AutoControl support]

The attached settings file has a working example for the Username filed on https://testpages.eviltester.com/styled/basic-html-form-test.html

[peter quitzgard]

This is weird, since I see the  "Enter" action gets triggered rightly after pasting a value in that field,

but I don't see the action itself having any data in the "trigger" section (no trigger, no conditions),

and only a "syntehsize" button in the "action" section:

I just opned the action with a text editor, and I see all the need parameters are there,

but for some reason they aren't displayed in the action itself.

I will keep trying it, thanks.

[peter quitzgard]

I deleted it, and then imported it again, and now I'm able to see both actions. 👌