2016-03-31 10 views
0

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.virtuelle Tastatur jquery falsche Anzeige in Bootstrap modal

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,

+0

Der Grund, es nicht funktioniert, weil '$ (‚# testete‘)' nicht (zumindest in der jsfiddle) vorhanden ist, so wird die Position auf 0 gesetzt , 0 (links, oben) - hier ist [eine Demo] (http://jsfiddle.net/5Lww1wgm/4/), die stattdessen '$ ('# test')' 'verwendet, oder einfach nur die Positionsoption und sie komplett entfernen sollte als @ jjs2000 freigegeben funktionieren. – Mottie

Antwort

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/

+0

jQuery UI ist in meinem Projekt enthalten und ich möchte Tastatur nach Textfeld anzeigen und Ihr Vorschlag funktioniert nicht. –

+0

Haben Sie sichergestellt, dass sowohl die jQuery-ui css- als auch die js-Dateien enthalten sind?auch da Ihre Geige sehr knochenknochen ist, ist es schwer zu sagen, ob das Problem durch einen anderen Teil Ihrer eigenen CSS, Skriptdateien oder HTML-Layout verursacht wird – jjr2000

+0

Es gibt virtuelle Tastatur Position Problem nicht jquery UI. Und Sie können die virtuelle Tastatur Demo auch für das Problem überprüfen. Anyway, aktualisierte Geige. –

0

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

+0

Es gibt ein eingebautes Problem der virtuellen Tastatur von jquery. Kannst du mir das Demo geben, was du vorgeschlagen hast? Wie ich es schon versucht habe und nicht funktioniert. –

+0

Hallo @ BhumiShah, danke für die Antwort. Ich habe Ihren JSFiddle gegabelt und in meinem Konto aktualisiert. Dies war jedoch eine viel zu kurze Option, die ursprünglich erwartet wurde. Allerdings habe ich es jetzt behoben :). Bitte sehen Sie [hier] (http://jsfiddle.net/rhysoc/ko6rufej/9/) – RhysO