Tastengröße auf der virtuellen Tastatur erzwingen

Dies ist das Layout, das ich erreichen möchte: https://jsfiddle.net/h0oa3Lps/ Alle Tasten haben die gleiche Größe.Tastengröße auf der virtuellen Tastatur erzwingen

In meiner Anwendung habe ich diesen Code. Die js ist am unteren Rand meiner Jade-Datei:

$('.keyboard') 
     .keyboard({ 
      layout: 'custom', 
      customLayout: { 
       'default' : [ 
        '1 2 3 {c}', 
        '4 5 6 {b}', 
        '7 8 9 {dec}', 
        '{left} {right} 0 {a}' 
       ] 
      }, 
      maxLength : 6, 
      restrictInput : true, 
      useCombos : false, 
      acceptValid : true, 
      validate : function(keyboard, value, isClosing){ 
       // only make valid if input is between 0 and 100 inclusive 
       return value >= 0.0 && value <= 100.0; 
      } 
     }) 
     .addTyping();

Wenn css/keyboard.min.css verwenden, den Pfeil nach links, Pfeil nach rechts und Backspace Tasten sind etwas größer als die anderen Tasten. Auch die Textpositionierung ist ausgeschaltet. Bild: keyboard-min-css

Wenn ich css/Tastatur-basic.min.css wechseln mit den Pfeiltasten die gleiche Größe wie normale Schlüssel aber die esc, Backspace und akzeptieren Tasten sind doppelt so groß wie die regulären Tasten. Auch dies nimmt die Hälfte des Bildschirms ein (da es nicht die jquery-ui-Positionierung verwendet). Bild:

keyboard-basic-min-css

Wie kann ich einheitliche Schlüsselgröße erzwingen?

Wenn es einen Unterschied macht, verwende ich Node, Express und Foundation v5.5.3 und ich habe gerade aktualisiert, um die neuesten Versionen von jQuery, jQuery-ui und jQuery.keyboard.

Quelle

2017-05-26 graham.reeds

Wenn ich Ihren Code in der Fiddle testen, funktioniert es wie erwartet. Ich frage mich, ob dies ein CSS-Problem ist. https://jsfiddle.net/Twisty/0zc4wh61/ – Twisty

Auch auf jQuery 3.2.1 und UI 1.12.1 aktualisiert, nur um sicherzustellen, dass es funktioniert: https://jsfiddle.net/Twisty/0zc4wh61/2/ – Twisty

Ich vermute, dass es könnte sei auf Media Selectors verwiesen. –

Um dieses Problem zu beheben, kopierte ich das unminifizierte css von keyboard.css zu einem keyboard-butchered.css. Dann begann ich mit den Stilen in keyboard-basic.css experimentieren und kam schließlich mit der folgenden auf, die teilweise beantwortet meine Frage:

.ui-keyboard { 
    /* adjust overall keyboard size using "font-size" */ 
    font-size: 28px; /* increase button size for small screen */ 
    text-align: center; 
    background: #fefefe; 
    border: 1px solid #aaa; 
    padding: 4px; 

    /* include the following setting to place the 
    keyboard at the bottom of the browser window */ 
    left: 0px; 
    top: auto; 
    /*position: fixed;*/ 
    position: absolute; 
    white-space: nowrap; 
    overflow-x: auto; 
    /* see issue #484 */ 
    -ms-touch-action: manipulation; 
    touch-action: manipulation; 
}

ich dann im Stil für die Tastatur-Taste gemischt. Dies ergibt den korrekten Stil, wie er in der jsfiddle-Demo (aber Jumbo-Größe) zu sehen ist.

.ui-keyboard-button { 
    border: 1px solid #aaa; 
    padding: 0 0.5em; 
    margin: 1px; 
    min-width: 3em; 
    height: 3em; 
    line-height: 3em; 
    vertical-align: top; 
    font-family: Helvetica, Arial, sans-serif; 
    color: #333; 
    text-align: center; 
    border-radius: 5px; 
    -webkit-box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); 
    box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.5); 
    background: white; 
    background-image: -webkit-linear-gradient(-90deg, white 0%, #e3e3e3 100%); 
    background-image:   linear-gradient(-90deg, white 0%, #e3e3e3 100%); 
    cursor: pointer; 
    overflow: hidden; 
    -moz-user-focus: ignore; 
}

Quelle

2017-05-30 14:06:48

Tastengröße auf der virtuellen Tastatur erzwingen

Antwort

Verwandte Themen