Get a backslash into input created by JavaScript

Question

I'm trying to create an input with JS. I want the input to show the numeric keyboard after clicking. You'll achieve it by giving the input pattern="\d*" so I tried:

div.innerHTML = '<input pattern="\d*" class="input-mark" type="number" placeholder="randomPlaceholder" step="1" min="1" max="5">';

As you guessed, doesn't work. I tried everything. Giving more slashes and backslashes, nothing worked.

I assume it's easy - but I couldn't figure it out.

ANy help is appreciated.

The `pattern` attribute is used to validate the input value, it doesn't change the keyboard displayed on mobile devices. — fubar, Jan 10 '18 at 06:47
@fubar I know, thanks, but it also changes the eyboard to numeric on mobile phones. It DOES work — David Stančík, Jan 10 '18 at 06:49
duplicate : https://stackoverflow.com/questions/6178556/phone-numeric-keyboard-for-text-input — Gitesh Purbia, Jan 10 '18 at 06:53

score 3 · Accepted Answer · edited Jan 10 '18 at 06:57

3

You need to escape the \ in \d to get the \ in the result. See the corrected code below.

document.getElementById("demo").innerHTML = '<input pattern="\\d*" class="input-mark" type="number" placeholder="randomPlaceholder" step="1" min="1" max="5">';

console.log('<input pattern="\\d*" class="input-mark" type="number" placeholder="randomPlaceholder" step="1" min="1" max="5">');

<div id="demo"></div>

This would work.

edited Jan 10 '18 at 06:57

Pedram

15,766
10
44
73

answered Jan 10 '18 at 06:53

Vivek

2,665
1
18
20

Well, I tried this, but it doesn't for me. Sorry :/ – David Stančík Jan 10 '18 at 06:54
Are you sure? I just tried it on my console and it did work. – Vivek Jan 10 '18 at 06:55
1

This works fine, see the snippet. I think you need to try again @David. +1 to this answer. – Pedram Jan 10 '18 at 06:59
@Vivek yes, nothing. Go ahead, take a look: http://uidave.com/prumer/ maybe I'm doing something wrong. – David Stančík Jan 10 '18 at 07:02
@DavidStančík I see it on your website , maybe your script cached, use CTRL+F5 – Pedram Jan 10 '18 at 07:09
@DavidStančík I have put the code in this answer to jsfiddle. Try opening it in your mobile device. https://jsfiddle.net/utraox8z/ – Vivek Jan 10 '18 at 07:10
1

yep, script cashed. Works great. Thanks a lot guys! – David Stančík Jan 10 '18 at 07:16

score 1 · Answer 2 · answered Jan 10 '18 at 06:51

1

The pattern is to define the input pattern. You will have to use inputmode in conjunction with this.

 <input type="number" pattern="[0-9]*" inputmode="numeric">

answered Jan 10 '18 at 06:51

Charlie

22,886
11
59
90

1

Without the `pattern`, without `inputmode` it should work because the `type number`, the problem here is `slash`. This is not really answer of this question. – Pedram Jan 10 '18 at 06:56

score 0 · Answer 3 · answered Jan 10 '18 at 06:59

Try this.

var x = document.createElement( 'input' ),
    div = document.getElementsByTagName( 'div' )[0]; // Just assuming

x.className = 'input-mark';
x.setAttribute( 'type', 'number' );
x.setAttribute( 'placeholder', 'randomPlaceholder' );
x.setAttribute( 'step', 1 );
x.setAttribute( 'min', 1 );
x.setAttribute( 'max', 5 );
x.setAttribute( 'pattern', '\\d*' );
div.appendChild( x );

https://jsfiddle.net/mu9s2m24/

Get a backslash into input created by JavaScript

3 Answers3