Mixing
Show numeric keyboard on mobile in password input type
0
I want to make
<input type="password">
to display numeric keyboard only on mobile devices (iOS/Android).
I have seen solutions like:
input[type=number] {
-webkit-text-security: disc;
}
But I cannot use this because of security and accessibility. Input value will be visible in inspector and voice over reads the numbers out loud.
Is there a way to achieve hidden input with numeric keyboard and proper accessibility?
javascript html css angular5
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
add a comment |
0
I want to make
<input type="password">
to display numeric keyboard only on mobile devices (iOS/Android).
I have seen solutions like:
input[type=number] {
-webkit-text-security: disc;
}
But I cannot use this because of security and accessibility. Input value will be visible in inspector and voice over reads the numbers out loud.
Is there a way to achieve hidden input with numeric keyboard and proper accessibility?
javascript html css angular5
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
1
stackoverflow.com/questions/6178556/…
– Muath
Nov 20 '18 at 22:59
1
stackoverflow.com/questions/19126856/…
– Poonam Hirpara
Nov 20 '18 at 23:00
@Muath I need the input type to be password so that the input is hidden.
– snowrain
Nov 21 '18 at 15:06
add a comment |
0
0
0
I want to make
<input type="password">
to display numeric keyboard only on mobile devices (iOS/Android).
I have seen solutions like:
input[type=number] {
-webkit-text-security: disc;
}
But I cannot use this because of security and accessibility. Input value will be visible in inspector and voice over reads the numbers out loud.
Is there a way to achieve hidden input with numeric keyboard and proper accessibility?
javascript html css angular5
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
I want to make
<input type="password">
to display numeric keyboard only on mobile devices (iOS/Android).
I have seen solutions like:
input[type=number] {
-webkit-text-security: disc;
}
But I cannot use this because of security and accessibility. Input value will be visible in inspector and voice over reads the numbers out loud.
Is there a way to achieve hidden input with numeric keyboard and proper accessibility?
javascript html css angular5
javascript html css angular5
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
asked Nov 20 '18 at 22:39
snowrainsnowrain
9410
9410
1
stackoverflow.com/questions/6178556/…
– Muath
Nov 20 '18 at 22:59
1
stackoverflow.com/questions/19126856/…
– Poonam Hirpara
Nov 20 '18 at 23:00
@Muath I need the input type to be password so that the input is hidden.
– snowrain
Nov 21 '18 at 15:06
add a comment |
1
stackoverflow.com/questions/6178556/…
– Muath
Nov 20 '18 at 22:59
1
stackoverflow.com/questions/19126856/…
– Poonam Hirpara
Nov 20 '18 at 23:00
@Muath I need the input type to be password so that the input is hidden.
– snowrain
Nov 21 '18 at 15:06
1
1
stackoverflow.com/questions/6178556/…
– Muath
Nov 20 '18 at 22:59
stackoverflow.com/questions/6178556/…
– Muath
Nov 20 '18 at 22:59
1
1
stackoverflow.com/questions/19126856/…
– Poonam Hirpara
Nov 20 '18 at 23:00
stackoverflow.com/questions/19126856/…
– Poonam Hirpara
Nov 20 '18 at 23:00
@Muath I need the input type to be password so that the input is hidden.
– snowrain
Nov 21 '18 at 15:06
@Muath I need the input type to be password so that the input is hidden.
– snowrain
Nov 21 '18 at 15:06
add a comment |
1 Answer
1
active
oldest
votes
0
Try this... <input type="password" pattern="[0-9]*" inputmode="numeric">
Updated Answer:
Put a couple more minutes of thought into this. I've got it (and tested).
/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402667%2fshow-numeric-keyboard-on-mobile-in-password-input-type%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Try this... <input type="password" pattern="[0-9]*" inputmode="numeric">
Updated Answer:
Put a couple more minutes of thought into this. I've got it (and tested).
/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
add a comment |
0
Try this... <input type="password" pattern="[0-9]*" inputmode="numeric">
Updated Answer:
Put a couple more minutes of thought into this. I've got it (and tested).
/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
add a comment |
0
0
0
Try this... <input type="password" pattern="[0-9]*" inputmode="numeric">
Updated Answer:
Put a couple more minutes of thought into this. I've got it (and tested).
/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
Try this... <input type="password" pattern="[0-9]*" inputmode="numeric">
Updated Answer:
Put a couple more minutes of thought into this. I've got it (and tested).
/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>/* Requires discs as characters */
input[type="number"] {
-webkit-text-security: disc !important;
}
/* Removes Spin Button */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
/* display: none; <- Crashes Chrome on hover */
-webkit-appearance: none;
margin: 0; /* <-- Apparently some margin are still there even though it's hidden */
}<div style="text-align: center;">
<label for="pin" class="my-1 mr-2 strong">Password</label>
<input class="form-control pin" id="pin" type="number" inputmode="numeric" autocomplete="off">
</div>answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
edited Nov 28 '18 at 21:28
answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
answered Nov 20 '18 at 23:49
webfrogswebfrogs
1,16632347
1,16632347
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
add a comment |
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
This is not working on neither iOS or Android
– snowrain
Nov 21 '18 at 18:20
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53402667%2fshow-numeric-keyboard-on-mobile-in-password-input-type%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
stackoverflow.com/questions/6178556/…
– Muath
Nov 20 '18 at 22:59
1
stackoverflow.com/questions/19126856/…
– Poonam Hirpara
Nov 20 '18 at 23:00
@Muath I need the input type to be password so that the input is hidden.
– snowrain
Nov 21 '18 at 15:06