virtuelle Tastatur jquery falsche Anzeige in Bootstrap modal

Question

Ich habe jquery virtuelle Tastatur für Bootstrap modal Box Feld verwendet. Und ich möchte Tastatur nach dem Textfeld in Modal-Box nach Fokus auf Textfeld anzeigen.

JQuery-Code ist

$('#test').keyboard({ layout: 'qwerty', usePreview: false,position: { 
     // null = attach to input/textarea; 
     // use $(sel) to attach elsewhere 
     of: $('#teste'), 
     my: 'center top', 
     at: 'center top', 
     // used when "usePreview" is false 
     at2: 'center bottom' 
     } }); 

Bootstrap modalbox Code ist:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
<div class="modal-dialog" role="document"> 
<div class="modal-content"> 
<form class="form-horizontal"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
    <h4 class="modal-title" id="myModalLabel">Contact Information</h4> 
    </div> 
    <div class="modal-body"> 
     <div class="form-group"> 
      <label for="test" class="col-sm-2 control-label">Email</label> 
      <div class="col-sm-6"> 
       <input type="email" class="form-control" id="test" placeholder="test" autocomplete="off"> 
      </div> 
     </div> 
    </div> 
    <div class="modal-footer"> 
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    <button type="button" class="btn btn-success" id="save" >Send</button> 
    </div> 
</div></form> 

Hier die URL Demo ist http://jsfiddle.net/5Lww1wgm/3/ Position absolut sein kann, so dass es nicht Tastatur Anzeige richtig . Danke,

Answer 1

Ihre Geige Link fehlt jQuery ui, schlage ich vor, dass Sie dies in Ihrem Projekt können fehlen, weil, wenn ich sie zu Ihrer Geige hinzugefügt begann es nach auch in der richtigen Art und Weise arbeiten zu ändern der Initialisierungscode die Positionsvariablen zu entfernen, so dass es wie so

$('#test').keyboard({ layout: 'qwerty', usePreview: false}); 

Hoffnung dies behebt das Problem

Edit 1 aussieht:

Hier

ist eine Arbeits Geige: http://jsfiddle.net/jjr2000/88zg4n3e/1/

Answer 2

danke für die Frage auf Stack Overflow.

Entschuldigung für nicht kommentieren, aber ich habe nicht genug Ruf.

Ich kann nicht sagen, da dieser jsfiddle Spielplatz nicht alle Bootstrap-Layout enthält, aber es sieht aus wie es dynamisch positioniert wurde. Dies ist sowohl eine schlechte Lösung als auch hässlich.

Wenn möglich (ich habe nicht die jQuery virtuelle Tastatur, bevor verwendet wird), würde ich Sie die folgenden Schritte vorschlagen:

• eine leere unsichtbar div oberhalb oder unterhalb der Textbox erstellen
• Auf loadup die Spritzen JQuery keybaord in dieses div
• Auf Textfeld Fokus, machen Sie dieses div sichtbar. Machen Sie es auf LoseFocus unsichtbar.

this helps