Open numeric version of windows 10 touch keyboard on input focus The Next CEO of Stack OverflowHTML text input allow only numeric inputUsing jQuery to test if an input has focusOpen a URL in a new tab (and not a new window) using JavaScriptForcing Numeric Keyboard in Internet Explorer on Windows Phone 7.5HTML5 - Open numeric keyboard iPhoneOpen link in new tab or windowAutomatically pop up tablet touch keyboard on WinForms input focusShow <Go> instead of <Next> in Chrome soft keyboard for input type=“number”How to allow only numbers on the phone's keyboard

Is it okay to store user locations?

Why here is plural "We went to the movies last night."

Would this house-rule that treats advantage as a +1 to the roll instead (and disadvantage as -1) and allows them to stack be balanced?

How can I get through very long and very dry, but also very useful technical documents when learning a new tool?

How to safely derail a train during transit?

Is a stroke of luck acceptable after a series of unfavorable events?

Why do professional authors make "consistency" mistakes? And how to avoid them?

The King's new dress

What can we do to stop prior company from asking us questions?

Rotate a column

Apart from "berlinern", do any other German dialects have a corresponding verb?

What does "Its cash flow is deeply negative" mean?

Anatomically Correct Mesopelagic Aves

Go Pregnant or Go Home

How to start emacs in "nothing" mode (`fundamental-mode`)

Science fiction (dystopian) short story set after WWIII

Fastest way to shutdown Ubuntu Mate 18.10

Horror movie/show or scene where a horse creature opens its mouth really wide and devours a man in a stables

Why do remote companies require working in the US?

How to make a software documentation "officially" citable?

How do I go from 300 unfinished/half written blog posts, to published posts?

If I blow insulation everywhere in my attic except the door trap, will heat escape through it?

Term for the "extreme-extension" version of a straw man fallacy?

Too much space between section and text in a twocolumn document



Open numeric version of windows 10 touch keyboard on input focus



The Next CEO of Stack OverflowHTML text input allow only numeric inputUsing jQuery to test if an input has focusOpen a URL in a new tab (and not a new window) using JavaScriptForcing Numeric Keyboard in Internet Explorer on Windows Phone 7.5HTML5 - Open numeric keyboard iPhoneOpen link in new tab or windowAutomatically pop up tablet touch keyboard on WinForms input focusShow <Go> instead of <Next> in Chrome soft keyboard for input type=“number”How to allow only numbers on the phone's keyboard










1















I have created a website for self-service front desk.

The computer that will show this website will only have a touch screen. No hardware keyboard or mouse. Just touch screen.

You can select an employee to meet with

Which opens up a form with 3 input fields: Name, phone number, and email.



I want the numeric on-screen keyboard to pop up when the user clicks the phone number input field.



For mobiles, I would use any of these options:



type="text" pattern="d*"
type="number" pattern="[0-9]*" inputmode="numeric"


But for Windows 10 on-screen keyboard this is not working.

Any ideas on how I can force the numeric keypad to open up ?

I have only tested this on Google Chrome. Maybe other browsers can handle this better.

Maybe this is not possible...



Alternative methods appreciated.






javascript php jquery html windows







share|improve this question
























  • A standards-compliant mobile browser usually determines which keyboard to display based on the type attribute of the input field, but it may be the case that this is a mobile-only feature. Since you tried it with Chrome on Windows 10, have you tried using Chrome on a mobile device (just to rule out other issues)? I think this may be a non-issue and more of a desktop vs mobile thing

    – Javier Larroulet
    Mar 8 at 13:01















1















I have created a website for self-service front desk.

The computer that will show this website will only have a touch screen. No hardware keyboard or mouse. Just touch screen.

You can select an employee to meet with

Which opens up a form with 3 input fields: Name, phone number, and email.



I want the numeric on-screen keyboard to pop up when the user clicks the phone number input field.



For mobiles, I would use any of these options:



type="text" pattern="d*"
type="number" pattern="[0-9]*" inputmode="numeric"


But for Windows 10 on-screen keyboard this is not working.

Any ideas on how I can force the numeric keypad to open up ?

I have only tested this on Google Chrome. Maybe other browsers can handle this better.

Maybe this is not possible...



Alternative methods appreciated.






javascript php jquery html windows







share|improve this question
























  • A standards-compliant mobile browser usually determines which keyboard to display based on the type attribute of the input field, but it may be the case that this is a mobile-only feature. Since you tried it with Chrome on Windows 10, have you tried using Chrome on a mobile device (just to rule out other issues)? I think this may be a non-issue and more of a desktop vs mobile thing

    – Javier Larroulet
    Mar 8 at 13:01













1












1








1








I have created a website for self-service front desk.

The computer that will show this website will only have a touch screen. No hardware keyboard or mouse. Just touch screen.

You can select an employee to meet with

Which opens up a form with 3 input fields: Name, phone number, and email.



I want the numeric on-screen keyboard to pop up when the user clicks the phone number input field.



For mobiles, I would use any of these options:



type="text" pattern="d*"
type="number" pattern="[0-9]*" inputmode="numeric"


But for Windows 10 on-screen keyboard this is not working.

Any ideas on how I can force the numeric keypad to open up ?

I have only tested this on Google Chrome. Maybe other browsers can handle this better.

Maybe this is not possible...



Alternative methods appreciated.






javascript php jquery html windows







share|improve this question
















I have created a website for self-service front desk.

The computer that will show this website will only have a touch screen. No hardware keyboard or mouse. Just touch screen.

You can select an employee to meet with

Which opens up a form with 3 input fields: Name, phone number, and email.



I want the numeric on-screen keyboard to pop up when the user clicks the phone number input field.



For mobiles, I would use any of these options:



type="text" pattern="d*"
type="number" pattern="[0-9]*" inputmode="numeric"


But for Windows 10 on-screen keyboard this is not working.

Any ideas on how I can force the numeric keypad to open up ?

I have only tested this on Google Chrome. Maybe other browsers can handle this better.

Maybe this is not possible...



Alternative methods appreciated.






javascript php jquery html windows




javascript php jquery html windows






share|improve this question















share|improve this question













share|improve this question




share|improve this question








edited Mar 9 at 3:49







Aron

















asked Mar 8 at 12:40









AronAron

4610




4610












  • A standards-compliant mobile browser usually determines which keyboard to display based on the type attribute of the input field, but it may be the case that this is a mobile-only feature. Since you tried it with Chrome on Windows 10, have you tried using Chrome on a mobile device (just to rule out other issues)? I think this may be a non-issue and more of a desktop vs mobile thing

    – Javier Larroulet
    Mar 8 at 13:01

















  • A standards-compliant mobile browser usually determines which keyboard to display based on the type attribute of the input field, but it may be the case that this is a mobile-only feature. Since you tried it with Chrome on Windows 10, have you tried using Chrome on a mobile device (just to rule out other issues)? I think this may be a non-issue and more of a desktop vs mobile thing

    – Javier Larroulet
    Mar 8 at 13:01
















A standards-compliant mobile browser usually determines which keyboard to display based on the type attribute of the input field, but it may be the case that this is a mobile-only feature. Since you tried it with Chrome on Windows 10, have you tried using Chrome on a mobile device (just to rule out other issues)? I think this may be a non-issue and more of a desktop vs mobile thing

– Javier Larroulet
Mar 8 at 13:01





A standards-compliant mobile browser usually determines which keyboard to display based on the type attribute of the input field, but it may be the case that this is a mobile-only feature. Since you tried it with Chrome on Windows 10, have you tried using Chrome on a mobile device (just to rule out other issues)? I think this may be a non-issue and more of a desktop vs mobile thing

– Javier Larroulet
Mar 8 at 13:01












1 Answer
1






active

oldest

votes


















0














There is an alternative method , in case this is not possible on Windows:

Proof: CodePen


I recreated the Windows10 version of the On screen keyboard using the Mottie jQuery virtual keyboard. You can choose which keys are displayed and create your own version of the numpad.



html:



<input type="text" id="phone" name="iauysdyd" maxlength="7" minlength="7" class="form-control required" data-error="Ritaðu símanúmer" placeholder="PhoneNumber" autocomplete="off" required>



Javascript which creates a numpad version of the virtual keyboard:



$("input#phone").
 keyboard(
 maxLength : 7,
 usePreview: false,
 autoAccept: true,
 language: ['Icelandic'],
 lang: ['is'],
 layout: "custom",
 customLayout: 
 normal: [
 "7 8 9", // choose your own keys here
 "4 5 6", // choose your own keys here
 "1 2 3", // choose your own keys here
 "0 bksp" // choose your own keys here
 ]
 
 );




And finally some CSS to make it look like the Windows 10 version of OSK:



body .ui-keyboard-input 
 text-align: center !important;

.ui-keyboard.ui-widget 
 bottom: 0%;
 left: 0;
 top: unset !important;
 position: absolute;
 width: 100%;
 background-color: #303030;
 background-size: 100%;


.ui-keyboard.ui-widget .ui-keyboard-button 
 font-size:1.4em;
 height: 2em;
 min-width: 2em;
 font-weight: 100;
 color: #fff;

button.ui-keyboard-button 
 background: #5d5d5d;
 border: 0px;

.ui-keyboard-shift span 
 background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20525.153%20525.153%22%20style%3D%22enable-background%3Anew%200%200%20525.153%20525.153%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22512%22%20height%3D%22512%22%20class%3D%22%22%3E%3Cg%3E%3Cg%3E%0A%09%3Cpath%20d%3D%22M169.974%2C401.567H355.2V216.21h123.586L262.576%2C0L46.367%2C216.21h123.586v185.357H169.974z%20M46.367%2C463.294h432.419v61.859%20%20%20H46.367V463.294z%22%20data-original%3D%22%23000000%22%20class%3D%22active-path%22%20style%3D%22fill%3A%23FFFFFF%22%20data-old_color%3D%22%23DAA3A3%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fsvg%3E') center center no-repeat;
 background-size: 20px;
 display: block;
 margin: auto;
 width: 30px;
 height: 30px;
 text-indent: -999em;

/* target greek letter alpha */
.ui-keyboard-bksp span 
 background: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20489.425%20489.425%22%20style%3D%22enable-background%3Anew%200%200%20489.425%20489.425%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M122.825%2C394.663c17.8%2C19.4%2C43.2%2C30.6%2C69.5%2C30.6h216.9c44.2%2C0%2C80.2-36%2C80.2-80.2v-200.7c0-44.2-36-80.2-80.2-80.2h-216.9%0A%09%09%09c-26.4%2C0-51.7%2C11.1-69.5%2C30.6l-111.8%2C121.7c-14.7%2C16.1-14.7%2C40.3%2C0%2C56.4L122.825%2C394.663z%20M29.125%2C233.063l111.8-121.8%0A%09%09%09c13.2-14.4%2C32-22.6%2C51.5-22.6h216.9c30.7%2C0%2C55.7%2C25%2C55.7%2C55.7v200.6c0%2C30.7-25%2C55.7-55.7%2C55.7h-217c-19.5%2C0-38.3-8.2-51.5-22.6%0A%09%09%09l-111.7-121.8C23.025%2C249.663%2C23.025%2C239.663%2C29.125%2C233.063z%22%2F%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M225.425%2C309.763c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6l47.8-47.8l47.8%2C47.8c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6%0A%09%09%09c4.8-4.8%2C4.8-12.5%2C0-17.3l-47.9-47.8l47.8-47.8c4.8-4.8%2C4.8-12.5%2C0-17.3s-12.5-4.8-17.3%2C0l-47.8%2C47.8l-47.8-47.8%0A%09%09%09c-4.8-4.8-12.5-4.8-17.3%2C0s-4.8%2C12.5%2C0%2C17.3l47.8%2C47.8l-47.8%2C47.8C220.725%2C297.263%2C220.725%2C304.962%2C225.425%2C309.763z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E') center center no-repeat;
 background-size: 40px;
 display: block;
 margin: auto;
 width: 40px;
 height: 40px;
 text-indent: -999em;

.ui-keyboard-bksp 
 width: 103px;

/* needed for inline image (second method below) */
.ui-keyboard-button 
 vertical-align: middle;



You can probably do some animations to get the keyboard to slide up like on windows 10.

This should get you a long way to recreate an exact replica of the Windows 10 osk.






share|improve this answer























    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


















    StackExchange.ready(
    function ()
    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063435%2fopen-numeric-version-of-windows-10-touch-keyboard-on-input-focus%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














    There is an alternative method , in case this is not possible on Windows:

    Proof: CodePen


    I recreated the Windows10 version of the On screen keyboard using the Mottie jQuery virtual keyboard. You can choose which keys are displayed and create your own version of the numpad.



    html:



    <input type="text" id="phone" name="iauysdyd" maxlength="7" minlength="7" class="form-control required" data-error="Ritaðu símanúmer" placeholder="PhoneNumber" autocomplete="off" required>



    Javascript which creates a numpad version of the virtual keyboard:



    $("input#phone").
     keyboard(
     maxLength : 7,
     usePreview: false,
     autoAccept: true,
     language: ['Icelandic'],
     lang: ['is'],
     layout: "custom",
     customLayout: 
     normal: [
     "7 8 9", // choose your own keys here
     "4 5 6", // choose your own keys here
     "1 2 3", // choose your own keys here
     "0 bksp" // choose your own keys here
     ]
     
     );




    And finally some CSS to make it look like the Windows 10 version of OSK:



    body .ui-keyboard-input 
     text-align: center !important;

    .ui-keyboard.ui-widget 
     bottom: 0%;
     left: 0;
     top: unset !important;
     position: absolute;
     width: 100%;
     background-color: #303030;
     background-size: 100%;


    .ui-keyboard.ui-widget .ui-keyboard-button 
     font-size:1.4em;
     height: 2em;
     min-width: 2em;
     font-weight: 100;
     color: #fff;

    button.ui-keyboard-button 
     background: #5d5d5d;
     border: 0px;

    .ui-keyboard-shift span 
     background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20525.153%20525.153%22%20style%3D%22enable-background%3Anew%200%200%20525.153%20525.153%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22512%22%20height%3D%22512%22%20class%3D%22%22%3E%3Cg%3E%3Cg%3E%0A%09%3Cpath%20d%3D%22M169.974%2C401.567H355.2V216.21h123.586L262.576%2C0L46.367%2C216.21h123.586v185.357H169.974z%20M46.367%2C463.294h432.419v61.859%20%20%20H46.367V463.294z%22%20data-original%3D%22%23000000%22%20class%3D%22active-path%22%20style%3D%22fill%3A%23FFFFFF%22%20data-old_color%3D%22%23DAA3A3%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fsvg%3E') center center no-repeat;
     background-size: 20px;
     display: block;
     margin: auto;
     width: 30px;
     height: 30px;
     text-indent: -999em;

    /* target greek letter alpha */
    .ui-keyboard-bksp span 
     background: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20489.425%20489.425%22%20style%3D%22enable-background%3Anew%200%200%20489.425%20489.425%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M122.825%2C394.663c17.8%2C19.4%2C43.2%2C30.6%2C69.5%2C30.6h216.9c44.2%2C0%2C80.2-36%2C80.2-80.2v-200.7c0-44.2-36-80.2-80.2-80.2h-216.9%0A%09%09%09c-26.4%2C0-51.7%2C11.1-69.5%2C30.6l-111.8%2C121.7c-14.7%2C16.1-14.7%2C40.3%2C0%2C56.4L122.825%2C394.663z%20M29.125%2C233.063l111.8-121.8%0A%09%09%09c13.2-14.4%2C32-22.6%2C51.5-22.6h216.9c30.7%2C0%2C55.7%2C25%2C55.7%2C55.7v200.6c0%2C30.7-25%2C55.7-55.7%2C55.7h-217c-19.5%2C0-38.3-8.2-51.5-22.6%0A%09%09%09l-111.7-121.8C23.025%2C249.663%2C23.025%2C239.663%2C29.125%2C233.063z%22%2F%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M225.425%2C309.763c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6l47.8-47.8l47.8%2C47.8c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6%0A%09%09%09c4.8-4.8%2C4.8-12.5%2C0-17.3l-47.9-47.8l47.8-47.8c4.8-4.8%2C4.8-12.5%2C0-17.3s-12.5-4.8-17.3%2C0l-47.8%2C47.8l-47.8-47.8%0A%09%09%09c-4.8-4.8-12.5-4.8-17.3%2C0s-4.8%2C12.5%2C0%2C17.3l47.8%2C47.8l-47.8%2C47.8C220.725%2C297.263%2C220.725%2C304.962%2C225.425%2C309.763z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E') center center no-repeat;
     background-size: 40px;
     display: block;
     margin: auto;
     width: 40px;
     height: 40px;
     text-indent: -999em;

    .ui-keyboard-bksp 
     width: 103px;

    /* needed for inline image (second method below) */
    .ui-keyboard-button 
     vertical-align: middle;



    You can probably do some animations to get the keyboard to slide up like on windows 10.

    This should get you a long way to recreate an exact replica of the Windows 10 osk.






    share|improve this answer



























      0














      There is an alternative method , in case this is not possible on Windows:

      Proof: CodePen


      I recreated the Windows10 version of the On screen keyboard using the Mottie jQuery virtual keyboard. You can choose which keys are displayed and create your own version of the numpad.



      html:



      <input type="text" id="phone" name="iauysdyd" maxlength="7" minlength="7" class="form-control required" data-error="Ritaðu símanúmer" placeholder="PhoneNumber" autocomplete="off" required>



      Javascript which creates a numpad version of the virtual keyboard:



      $("input#phone").
       keyboard(
       maxLength : 7,
       usePreview: false,
       autoAccept: true,
       language: ['Icelandic'],
       lang: ['is'],
       layout: "custom",
       customLayout: 
       normal: [
       "7 8 9", // choose your own keys here
       "4 5 6", // choose your own keys here
       "1 2 3", // choose your own keys here
       "0 bksp" // choose your own keys here
       ]
       
       );




      And finally some CSS to make it look like the Windows 10 version of OSK:



      body .ui-keyboard-input 
       text-align: center !important;

      .ui-keyboard.ui-widget 
       bottom: 0%;
       left: 0;
       top: unset !important;
       position: absolute;
       width: 100%;
       background-color: #303030;
       background-size: 100%;


      .ui-keyboard.ui-widget .ui-keyboard-button 
       font-size:1.4em;
       height: 2em;
       min-width: 2em;
       font-weight: 100;
       color: #fff;

      button.ui-keyboard-button 
       background: #5d5d5d;
       border: 0px;

      .ui-keyboard-shift span 
       background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20525.153%20525.153%22%20style%3D%22enable-background%3Anew%200%200%20525.153%20525.153%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22512%22%20height%3D%22512%22%20class%3D%22%22%3E%3Cg%3E%3Cg%3E%0A%09%3Cpath%20d%3D%22M169.974%2C401.567H355.2V216.21h123.586L262.576%2C0L46.367%2C216.21h123.586v185.357H169.974z%20M46.367%2C463.294h432.419v61.859%20%20%20H46.367V463.294z%22%20data-original%3D%22%23000000%22%20class%3D%22active-path%22%20style%3D%22fill%3A%23FFFFFF%22%20data-old_color%3D%22%23DAA3A3%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fsvg%3E') center center no-repeat;
       background-size: 20px;
       display: block;
       margin: auto;
       width: 30px;
       height: 30px;
       text-indent: -999em;

      /* target greek letter alpha */
      .ui-keyboard-bksp span 
       background: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20489.425%20489.425%22%20style%3D%22enable-background%3Anew%200%200%20489.425%20489.425%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M122.825%2C394.663c17.8%2C19.4%2C43.2%2C30.6%2C69.5%2C30.6h216.9c44.2%2C0%2C80.2-36%2C80.2-80.2v-200.7c0-44.2-36-80.2-80.2-80.2h-216.9%0A%09%09%09c-26.4%2C0-51.7%2C11.1-69.5%2C30.6l-111.8%2C121.7c-14.7%2C16.1-14.7%2C40.3%2C0%2C56.4L122.825%2C394.663z%20M29.125%2C233.063l111.8-121.8%0A%09%09%09c13.2-14.4%2C32-22.6%2C51.5-22.6h216.9c30.7%2C0%2C55.7%2C25%2C55.7%2C55.7v200.6c0%2C30.7-25%2C55.7-55.7%2C55.7h-217c-19.5%2C0-38.3-8.2-51.5-22.6%0A%09%09%09l-111.7-121.8C23.025%2C249.663%2C23.025%2C239.663%2C29.125%2C233.063z%22%2F%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M225.425%2C309.763c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6l47.8-47.8l47.8%2C47.8c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6%0A%09%09%09c4.8-4.8%2C4.8-12.5%2C0-17.3l-47.9-47.8l47.8-47.8c4.8-4.8%2C4.8-12.5%2C0-17.3s-12.5-4.8-17.3%2C0l-47.8%2C47.8l-47.8-47.8%0A%09%09%09c-4.8-4.8-12.5-4.8-17.3%2C0s-4.8%2C12.5%2C0%2C17.3l47.8%2C47.8l-47.8%2C47.8C220.725%2C297.263%2C220.725%2C304.962%2C225.425%2C309.763z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E') center center no-repeat;
       background-size: 40px;
       display: block;
       margin: auto;
       width: 40px;
       height: 40px;
       text-indent: -999em;

      .ui-keyboard-bksp 
       width: 103px;

      /* needed for inline image (second method below) */
      .ui-keyboard-button 
       vertical-align: middle;



      You can probably do some animations to get the keyboard to slide up like on windows 10.

      This should get you a long way to recreate an exact replica of the Windows 10 osk.






      share|improve this answer

























        0












        0








        0







        There is an alternative method , in case this is not possible on Windows:

        Proof: CodePen


        I recreated the Windows10 version of the On screen keyboard using the Mottie jQuery virtual keyboard. You can choose which keys are displayed and create your own version of the numpad.



        html:



        <input type="text" id="phone" name="iauysdyd" maxlength="7" minlength="7" class="form-control required" data-error="Ritaðu símanúmer" placeholder="PhoneNumber" autocomplete="off" required>



        Javascript which creates a numpad version of the virtual keyboard:



        $("input#phone").
         keyboard(
         maxLength : 7,
         usePreview: false,
         autoAccept: true,
         language: ['Icelandic'],
         lang: ['is'],
         layout: "custom",
         customLayout: 
         normal: [
         "7 8 9", // choose your own keys here
         "4 5 6", // choose your own keys here
         "1 2 3", // choose your own keys here
         "0 bksp" // choose your own keys here
         ]
         
         );




        And finally some CSS to make it look like the Windows 10 version of OSK:



        body .ui-keyboard-input 
         text-align: center !important;

        .ui-keyboard.ui-widget 
         bottom: 0%;
         left: 0;
         top: unset !important;
         position: absolute;
         width: 100%;
         background-color: #303030;
         background-size: 100%;


        .ui-keyboard.ui-widget .ui-keyboard-button 
         font-size:1.4em;
         height: 2em;
         min-width: 2em;
         font-weight: 100;
         color: #fff;

        button.ui-keyboard-button 
         background: #5d5d5d;
         border: 0px;

        .ui-keyboard-shift span 
         background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20525.153%20525.153%22%20style%3D%22enable-background%3Anew%200%200%20525.153%20525.153%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22512%22%20height%3D%22512%22%20class%3D%22%22%3E%3Cg%3E%3Cg%3E%0A%09%3Cpath%20d%3D%22M169.974%2C401.567H355.2V216.21h123.586L262.576%2C0L46.367%2C216.21h123.586v185.357H169.974z%20M46.367%2C463.294h432.419v61.859%20%20%20H46.367V463.294z%22%20data-original%3D%22%23000000%22%20class%3D%22active-path%22%20style%3D%22fill%3A%23FFFFFF%22%20data-old_color%3D%22%23DAA3A3%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fsvg%3E') center center no-repeat;
         background-size: 20px;
         display: block;
         margin: auto;
         width: 30px;
         height: 30px;
         text-indent: -999em;

        /* target greek letter alpha */
        .ui-keyboard-bksp span 
         background: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20489.425%20489.425%22%20style%3D%22enable-background%3Anew%200%200%20489.425%20489.425%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M122.825%2C394.663c17.8%2C19.4%2C43.2%2C30.6%2C69.5%2C30.6h216.9c44.2%2C0%2C80.2-36%2C80.2-80.2v-200.7c0-44.2-36-80.2-80.2-80.2h-216.9%0A%09%09%09c-26.4%2C0-51.7%2C11.1-69.5%2C30.6l-111.8%2C121.7c-14.7%2C16.1-14.7%2C40.3%2C0%2C56.4L122.825%2C394.663z%20M29.125%2C233.063l111.8-121.8%0A%09%09%09c13.2-14.4%2C32-22.6%2C51.5-22.6h216.9c30.7%2C0%2C55.7%2C25%2C55.7%2C55.7v200.6c0%2C30.7-25%2C55.7-55.7%2C55.7h-217c-19.5%2C0-38.3-8.2-51.5-22.6%0A%09%09%09l-111.7-121.8C23.025%2C249.663%2C23.025%2C239.663%2C29.125%2C233.063z%22%2F%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M225.425%2C309.763c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6l47.8-47.8l47.8%2C47.8c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6%0A%09%09%09c4.8-4.8%2C4.8-12.5%2C0-17.3l-47.9-47.8l47.8-47.8c4.8-4.8%2C4.8-12.5%2C0-17.3s-12.5-4.8-17.3%2C0l-47.8%2C47.8l-47.8-47.8%0A%09%09%09c-4.8-4.8-12.5-4.8-17.3%2C0s-4.8%2C12.5%2C0%2C17.3l47.8%2C47.8l-47.8%2C47.8C220.725%2C297.263%2C220.725%2C304.962%2C225.425%2C309.763z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E') center center no-repeat;
         background-size: 40px;
         display: block;
         margin: auto;
         width: 40px;
         height: 40px;
         text-indent: -999em;

        .ui-keyboard-bksp 
         width: 103px;

        /* needed for inline image (second method below) */
        .ui-keyboard-button 
         vertical-align: middle;



        You can probably do some animations to get the keyboard to slide up like on windows 10.

        This should get you a long way to recreate an exact replica of the Windows 10 osk.






        share|improve this answer













        There is an alternative method , in case this is not possible on Windows:

        Proof: CodePen


        I recreated the Windows10 version of the On screen keyboard using the Mottie jQuery virtual keyboard. You can choose which keys are displayed and create your own version of the numpad.



        html:



        <input type="text" id="phone" name="iauysdyd" maxlength="7" minlength="7" class="form-control required" data-error="Ritaðu símanúmer" placeholder="PhoneNumber" autocomplete="off" required>



        Javascript which creates a numpad version of the virtual keyboard:



        $("input#phone").
         keyboard(
         maxLength : 7,
         usePreview: false,
         autoAccept: true,
         language: ['Icelandic'],
         lang: ['is'],
         layout: "custom",
         customLayout: 
         normal: [
         "7 8 9", // choose your own keys here
         "4 5 6", // choose your own keys here
         "1 2 3", // choose your own keys here
         "0 bksp" // choose your own keys here
         ]
         
         );




        And finally some CSS to make it look like the Windows 10 version of OSK:



        body .ui-keyboard-input 
         text-align: center !important;

        .ui-keyboard.ui-widget 
         bottom: 0%;
         left: 0;
         top: unset !important;
         position: absolute;
         width: 100%;
         background-color: #303030;
         background-size: 100%;


        .ui-keyboard.ui-widget .ui-keyboard-button 
         font-size:1.4em;
         height: 2em;
         min-width: 2em;
         font-weight: 100;
         color: #fff;

        button.ui-keyboard-button 
         background: #5d5d5d;
         border: 0px;

        .ui-keyboard-shift span 
         background: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%20id%3D%22Capa_1%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%20525.153%20525.153%22%20style%3D%22enable-background%3Anew%200%200%20525.153%20525.153%3B%22%20xml%3Aspace%3D%22preserve%22%20width%3D%22512%22%20height%3D%22512%22%20class%3D%22%22%3E%3Cg%3E%3Cg%3E%0A%09%3Cpath%20d%3D%22M169.974%2C401.567H355.2V216.21h123.586L262.576%2C0L46.367%2C216.21h123.586v185.357H169.974z%20M46.367%2C463.294h432.419v61.859%20%20%20H46.367V463.294z%22%20data-original%3D%22%23000000%22%20class%3D%22active-path%22%20style%3D%22fill%3A%23FFFFFF%22%20data-old_color%3D%22%23DAA3A3%22%3E%3C%2Fpath%3E%0A%3C%2Fg%3E%3C%2Fg%3E%20%3C%2Fsvg%3E') center center no-repeat;
         background-size: 20px;
         display: block;
         margin: auto;
         width: 30px;
         height: 30px;
         text-indent: -999em;

        /* target greek letter alpha */
        .ui-keyboard-bksp span 
         background: url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20id%3D%22Capa_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0A%09%20viewBox%3D%220%200%20489.425%20489.425%22%20style%3D%22enable-background%3Anew%200%200%20489.425%20489.425%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0A%3Cg%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M122.825%2C394.663c17.8%2C19.4%2C43.2%2C30.6%2C69.5%2C30.6h216.9c44.2%2C0%2C80.2-36%2C80.2-80.2v-200.7c0-44.2-36-80.2-80.2-80.2h-216.9%0A%09%09%09c-26.4%2C0-51.7%2C11.1-69.5%2C30.6l-111.8%2C121.7c-14.7%2C16.1-14.7%2C40.3%2C0%2C56.4L122.825%2C394.663z%20M29.125%2C233.063l111.8-121.8%0A%09%09%09c13.2-14.4%2C32-22.6%2C51.5-22.6h216.9c30.7%2C0%2C55.7%2C25%2C55.7%2C55.7v200.6c0%2C30.7-25%2C55.7-55.7%2C55.7h-217c-19.5%2C0-38.3-8.2-51.5-22.6%0A%09%09%09l-111.7-121.8C23.025%2C249.663%2C23.025%2C239.663%2C29.125%2C233.063z%22%2F%3E%0A%09%09%3Cpath%20style%3D%22fill%3A%23fff%3B%22%20d%3D%22M225.425%2C309.763c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6l47.8-47.8l47.8%2C47.8c2.4%2C2.4%2C5.5%2C3.6%2C8.7%2C3.6s6.3-1.2%2C8.7-3.6%0A%09%09%09c4.8-4.8%2C4.8-12.5%2C0-17.3l-47.9-47.8l47.8-47.8c4.8-4.8%2C4.8-12.5%2C0-17.3s-12.5-4.8-17.3%2C0l-47.8%2C47.8l-47.8-47.8%0A%09%09%09c-4.8-4.8-12.5-4.8-17.3%2C0s-4.8%2C12.5%2C0%2C17.3l47.8%2C47.8l-47.8%2C47.8C220.725%2C297.263%2C220.725%2C304.962%2C225.425%2C309.763z%22%2F%3E%0A%3C%2Fg%3E%0A%3C%2Fsvg%3E') center center no-repeat;
         background-size: 40px;
         display: block;
         margin: auto;
         width: 40px;
         height: 40px;
         text-indent: -999em;

        .ui-keyboard-bksp 
         width: 103px;

        /* needed for inline image (second method below) */
        .ui-keyboard-button 
         vertical-align: middle;



        You can probably do some animations to get the keyboard to slide up like on windows 10.

        This should get you a long way to recreate an exact replica of the Windows 10 osk.







        share|improve this answer












        share|improve this answer



        share|improve this answer










        answered Mar 9 at 4:20









        AronAron

        4610




        4610





























            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














            StackExchange.ready(
            function ()
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55063435%2fopen-numeric-version-of-windows-10-touch-keyboard-on-input-focus%23new-answer', 'question_page');

            );

            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







            -

            Popular posts from this blog

            Identity Server 4 is not redirecting to Angular app after login2019 Community Moderator ElectionIdentity Server 4 and dockerIdentityserver implicit flow unauthorized_clientIdentityServer Hybrid Flow - Access Token is null after user successful loginIdentity Server to MVC client : Page Redirect After loginLogin with Steam OpenId(oidc-client-js)Identity Server 4+.NET Core 2.0 + IdentityIdentityServer4 post-login redirect not working in Edge browserCall to IdentityServer4 generates System.NullReferenceException: Object reference not set to an instance of an objectIdentityServer4 without HTTPS not workingHow to get Authorization code from identity server without login form

            Image
            How to make healing in an exploration game interesting What's the meaning of “spike” in the context of “adrenaline spike”? Welcoming 2019 Pi day: How to draw the letter π? Do I need life insurance if I can cover my own funeral costs? What do Xenomorphs eat in the Alien series? Python if-else code style for reduced code for rounding floats My adviser wants to be the first author Do I need to get involved in office politics to get ahead? Why one should not leave fingerprints on bulbs and plugs? How to change two letters closest to a string and one letter immediately after a string using notepad++ Why doesn't the EU now just force the UK to choose between referendum and no-deal? How to deal with taxi scam when on vacation? Recruiter wants very extensive technical details about all of my previous work What is the least resource intensive way to generate the luatex font cache for a new font? How Could an Airship Be Repaired Mid-Flight ...
            Read more

            2005 Ahvaz unrest Contents Background Causes Casualties Aftermath See also References Navigation menue"At Least 10 Are Killed by Bombs in Iran""Iran"Archived"Arab-Iranians in Iran to make April 15 'Day of Fury'"State of Mind, State of Order: Reactions to Ethnic Unrest in the Islamic Republic of Iran.10.1111/j.1754-9469.2008.00028.x"Iran hangs Arab separatists"Iran Overview from ArchivedConstitution of the Islamic Republic of Iran"Tehran puzzled by forged 'riots' letter""Iran and its minorities: Down in the second class""Iran: Handling Of Ahvaz Unrest Could End With Televised Confessions""Bombings Rock Iran Ahead of Election""Five die in Iran ethnic clashes""Iran: Need for restraint as anniversary of unrest in Khuzestan approaches"Archived"Iranian Sunni protesters killed in clashes with security forces"Archived

            Image
            Sheikh Khazal (1924)Unrest (1925)Unrest (1928)Unrest (1940)1943 revolt1945 revoltInsurgency (1956-70)Insurgency (1979)Embassy siege (1980)Unrest (2005)2005–06 Ahvaz bombingsDay of Rage (2011)Uprising of Dignity (2018) Arab rebellionsProtests in Iran2005 riotsPolitical riots2005 in IranAhvazKhuzestan conflictHuman rights in IranAhwazi Arabs Iranian ArabsAhvazKhuzestanbombingsPersian GulfKhuzestanShadeganHoveyzehSusangerdMahshahrKhorramshahrAbadanAhvazConstitution of IranPersianofficial languageconstitution of the Islamic RepublicconstitutionIranian ArabsAmnesty InternationalConstitution of the Islamic Republic of IranMohammad-Ali AbtahiMohammad KhatamiAmnesty InternationalAli ShamkhaniAhvazIranian ArabsprotestAhvazNobel Peace PrizeShirin Ebadi 2005 Ahvaz unrest Part of Arab separatism in Khuzestan Iranian Khuzestan province Date 15–18 April 2005 Methods demonstrations, riots Status Unrest quelled Parties to the civil conflict Iranian Arabs Iranian Government Lead figures ...
            Read more

            Can't initialize raids on a new ASUS Prime B360M-A motherboard2019 Community Moderator ElectionSimilar to RAID config yet more like mirroring solution?Can't get motherboard serial numberWhy does the BIOS entry point start with a WBINVD instruction?UEFI performance Asus Maximus V Extreme

            Image
            "One can do his homework in the library" Why does Deadpool say "You're welcome, Canada," after shooting Ryan Reynolds in the end credits? Potential difference and current flow It's a yearly task, alright Co-worker team leader wants to inject the crap software product of his friends into our development. What should I say to our common boss? Touchscreen-controlled dentist office snowman collector game What to do when during a meeting client people start to fight (even physically) with each others? What options are left, if Britain cannot decide? How could our ancestors have domesticated a solitary predator? Professor being mistaken for a grad student When two POV characters meet Replacing Windows 7 security updates with anti-virus? What has been your most complicated TikZ drawing? Can the word "advantage" be used as an adjective? How could a female member of a species produce eggs unto death? Can the druid cantrip Thorn...
            Read more