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

            Thal And Out Agency railway station See also References External links Navigation menuOfficial Web Site of Pakistan RailwaysArchivedOfficial Web Site of Pakistan Railwayseeexpanding ite

            Image
            Golra Sharif KutbalFatehjangGaganChauntraKahal Basal Junction DomelNammalChura Sharif HaltLangar Jand Junction Khushalgarh Faqir Hussain ShaheedTilkanSeni GambatBabari BandaCadet College Kohat Kohat Cantonment Kohat Tehsil Nasrat Khel Chikarkot Ustarzai Raisan Ibrahimzai Hangu Doaba Darsmand Thal Aab-e-gumAhmedwalAlam RegAlozaiAzadBadinzaiBakhtiarabad DomkiBeleli Bostan Junction Chaman ChurmianDalbandinDamboliDera Allah YarDera Murad JamaliDingraDozanGalangurGatGulistanHirokKan MehtarzaiKhanaiKhan Muhammad ChahKila SaifullahKishingiKoh-e-TaftanKolpurKuchlakMachMangoliMirjavehMushkafMuslimbaghNok KundiNushkiNuttallPadag RoadPerakPehro KunriPanirPeshiQilla Abdullah Quetta Sar-i-AbSheikh MandahSheikh Wasil Sibi Junction Spezand Junction Shela BaghTozghiWali KhanYakmachYaru Zhob IslamabadGolra Sharif Junction Attock City Junction Attock KhurdBahawalpurChiniotDandot RSFaisalabadGujar KhanGujratJalloJhang SadarJhelum Khanewal Junction KhanpurKhewra Lahore Junction Lahore CantonmentLiaquat Pu...
            Read more

            Understanding generators in Python2019 Community Moderator ElectionGenerator function not working pythonFor loop not executing two timesGenerators - Printing generated valuesWhy can a python generator only be used once?What exactly do generators do?What does the “yield” keyword do?What does “list comprehension” mean? How does it work and how can I use it?sklearn Kfold acces single fold instead of for loopIs a generator the callable? Which is the generator?Apply Border To Range Of Cells Using OpenpyxlCalling an external command in PythonWhat are metaclasses in Python?What is the difference between @staticmethod and @classmethod?Finding the index of an item given a list containing it in PythonDifference between append vs. extend list methods in PythonHow can I safely create a nested directory in Python?Does Python have a ternary conditional operator?Understanding slice notationUnderstanding Python super() with __init__() methodsDoes Python have a string 'contains' substring method?

            Image
            What is it called when someone votes for an option that's not their first choice? Have the tides ever turned twice on any open problem? Is xar preinstalled on macOS? "Marked down as someone wanting to sell shares." What does that mean? Does fire aspect on a sword, destroy mob drops? Is VPN a layer 3 concept? Exposing a company lying about themselves in a tightly knit industry: Is my career at risk on the long run? Symbolism of 18 Journeyers How can a new country break out from a developed country without war? What is the difference between something being completely legal and being completely decriminalized? Does convergence of polynomials imply that of its coefficients? Friend wants my recommendation but I don't want to give it to him Why I don't get the wanted width of tcbox? Single word to change groups Would this string work as string? Unfrosted light bulb Air travel with refrigerated insulin What is the tangent at a sharp poi...
            Read more

            How can I change the color of pagination dots of UIPageControl?How to change UIPageControl dotsIs there a way to change page indicator dots colorCustomize dot with image of UIPageControl at index 0 of UIPageControlNo visible @interface for 'NSObject<PageControlDelegate>' declares the selector 'pageControlPageDidChange:'How to change the color of pagination dots in UIPageControl with a different color per pagepagecontrol indicator custom image instead of DefaultChanging the colour of UIPageControl dots in MonoTouchpagecontrol selectable page visibility color?Alternative way to load ViewControllers on a UIPageControlHow to set only layer.border-color for UIpage control dots in swiftHow can I develop for iPhone using a Windows development machine?How to change the name of an iOS app?UITableView - change section header coloruipagecontrol indicator(dot)issueCustom UIPageControl dots color not changingchange the interspace between UIPageControl dotsHow to change Status Bar text color in iOSHow can I change image tintColor in iOS and WatchKitUIPageControl dots with larger space in between each dotsHow to change the color of pagination dots in UIPageControl with a different color per page

            Image
            How do I implement a file system driver driver in Linux? Fly on a jet pack vs fly with a jet pack? Is possible to search in vim history? Translation of Scottish 16th century church stained glass Ridge Regression with Gradient Descent Converges to OLS estimates What linear sensor for a keyboard? Did US corporations pay demonstrators in the German demonstrations against article 13? Is it improper etiquette to ask your opponent what his/her rating is before the game? Why does Async/Await work properly when the loop is inside the async function and not the other way around? Why did the EU agree to delay the Brexit deadline? A Permanent Norse Presence in America Did arcade monitors have same pixel aspect ratio as TV sets? Can the Supreme Court overturn an impeachment? Drawing ramified coverings with tikz Greco-Roman egalitarianism Can someone explain how this makes sense electrically? Is it possible to use .desktop files to open local pdf files on specific pa...
            Read more