web-dev-qa-db-ja.com

ipad Webアプリケーション：jquery datepickerでキーボードがポップアップしないようにする方法

Jquery datepickerが添付された日付フィールドを持つフォームがあります。

日付フィールドを選択すると、日付ピッカーがポップアップしますが、iPadキーボードがスライドして表示され、日付ピッカーが見えなくなります。

この状況でキーボードがポップアップしないようにするにはどうすればよいですか？

jqueryipadjquery-ui-datepicker
35
Rob Osborne

Rob Osborneのソリューションを少し修正したバージョンを使用しましたが、iPadとiPhoneでキーボードがポップアップするのを防ぐことができました。

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});
29
cdeutsch

入力を無効にする代わりに、「読み取り専用」プロパティを指定します。フォームを変更せずに保存できるため、これを無効にしたほうが良いです。

ここにもっとあります readonly about info 。

24
Miriam Salzer

これは、ユーザーに入力がぼやけているとブラウザに認識させることでこの問題に対処し、表示する前にキーボードを非表示にする方法です：

$('blabla')
    .datepicker(
    {
        /* options */
    })
    .on('focus',function()
    {
        $(this).trigger('blur');
    });

私が見つけた他のソリューションの多くがうまくいかなかった私にとってはうまくいきます！

11
rAthus

date-timepicker を使用している場合、「beforeShow」オプションは使用できません。入力フィールドに「読み取り専用」属性を追加するだけで、日付ピッカーが完全に無効になります。

解決策は、要素で「readonly」属性を使用し、日付ピッカーのオプションとして「ignoreReadonly：true」を追加することです。

$(function() {
     $('#datetimepicker1').datetimepicker({
        format: 'MM-DD-YYYY',
        minDate: moment(),
        ignoreReadonly: true
     });
});
<div class='input-group date' id='datetimepicker1'>
  <input type='text' id="date" readonly style="cursor: default; background-color: #fff" class="form-control" />
  <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
</div>
4
Jorgos

次のように、ユーザーがカレンダーをクリックしたときに入力フィールドを無効にし、日付ピッカーが閉じた後にフィールドを有効にするために、CDeutschとRobの回答の組み合わせを使用しました。

$(".date").datepicker({
    showOn: "button",
    onClose: function(dateText, inst) { $(this).attr("disabled", false); },
    beforeShow: function(dateText, inst) { $(this).attr("disabled", true); },
    buttonImage: "/images/calendar.png",
    buttonImageOnly: true
});

利点は、ユーザーがiPadのキーボードを表示する入力フィールドをクリックして日付を手動で編集できること、または日付ボタンをクリックして日付ピッカーを使用できることです。

繰り返しますが、この問題に関するすべてのすばらしい情報に感謝します。上記の投稿を読むまで、私はこの同じ問題にこだわっていました。

4
divby1

これを行う方法を見つけられませんでしたが、buttonImage機能をbuttonImageOnlyで使用し、日付フィールドを無効にするという許容可能な回避策を使用することになりました。

$("#id_date").datepicker({
        dateFormat: 'yy/mm/dd',
        showOn:"button",
        buttonImage: "/icons/calendar.gif",
        buttonImageOnly: true });
$('#id_date').attr("disabled", true);

フォームでこれを行う場合は、フォームを送信またはシリアル化する前にフィールドを再度有効にしてください。そうしないと、値が送信されません（少なくともiPadでは）。サブミット関数で次のことを行います。

$('#id_date').attr("disabled", false);
var dataString = $('#the_form').serialize();
$.ajax({
     type: "POST",
     url: 'myurl',
     data: dataString,
     ...
1
Rob Osborne

このソリューションは、すべての異なる日付時刻ピッカーで機能する可能性があると思いますが、 XDSoftの日付ピッカー でのみテストしました。

アイデアは、マウスイベントを無効にすることです（pointer-events: 'none'）キーボードが表示されないようにinput要素に追加し、onclickを囲む親divにinputイベントを追加します_要素。 onclickイベントは、日付時刻ピッカーを開く必要があります。

コード例

これは、XDSoftのdatetimepickerを使用した場合の問題の修正方法を示しています。

このソリューションでは、input要素がdiv要素内にラップされていると想定しています。

(function($){
    var originalDateTimePicker = $.fn.datetimepicker;
    $.fn.datetimepicker = function(args){
        this.each(function(i, dateTimePicker){
            dateTimePicker = $(dateTimePicker);
            dateTimePicker.closest('div').on('click', function(e){ 
                dateTimePicker.trigger('open');
            });
            dateTimePicker.css({ 'pointer-events': 'none' });
        });
        return originalDateTimePicker.apply(this, arguments);
    };
})(window.jQuery||window.$);
0
Vegard

最新のブラウザでこれを行うより良い方法は、inputmode = "none"を使用することだと思います。 HTMLコードは次のとおりです。

<input type="text" ... inputmode="none" />

少なくともAndroid Chromeこれにより、私のdatepicker（明らかにjQueryで個別に初期化されます）が電話に表示され、ソフトキーボードが not が表示されます。

これにより、フィールドを読み取り専用にすることで可能になる問題（値をクリアできないなど）が防止されます。

0
Peter Bowers

私はこのコードを使用しましたが、うまく機能します...「.hasDatepicker」クラスは、日付ピッカーを保持する入力用です

<script type="text/javascript">

jQuery（document）.ready（function（）{

var ybdDatePick = jQuery( ".hasDatepicker" );

    jQuery(function() {
       ybdDatePick.datepicker({ }).attr('readonly','readonly');

       ybdDatePick.on('focus',function() {
            jQuery(this).trigger('blur');
             this.datepicker({ }).attr('readonly','readonly');

          }
        );

});
});
0
Yossi Ben-david

今から3時間、どこにも行かない。私はIphoneを持っていないので、上記でAndroid電話2.3を実行しています。

私の携帯電話では、常にキーパッドを取得しますが、何も停止しません。また、発火の背後にあるasp.net4/C＃コードを停止するため、「読み取り専用」を使用できません。これは少しcr＃pですが、それはそうです。

だから私の最初の質問は、これらのアイデアはIphoneでのみ機能するのですか？

乾杯

更新

ASP.Net 4で上記の回答を機能させる方法を見つけたので、共有したいと思いました。

<asp：TextBox ID = "something" ...>は、サーバー側で「ctl00_content .....」のような「特別な」IDが割り当てられているため、JavascriptまたはJQueryを起動しないようです。 JQueryコードでは「#something」として。しかし、この投稿を使用して試行錯誤のおかげで：-

JQueryでasp：textboxから値を取得

上記のポスターのおかげで次のものを使用すると、フォーカスがぼやけてキーボードを表示する携帯電話が停止します（少なくとも私のAndroidとにかく:)

$("#<%=sDatepicker.ClientID%>").focus(function () {
        $(this).blur();
    });

そのため、上記のJQueryで使用される次の簡単なサンプルコードは、他の人にも役立つことを期待しています。

<asp:TextBox ID="sDatepicker" OnTextChanged="sDatepicker_changed" AutoPostBack="True" ReadOnly="False"></asp:TextBox>

もちろん、「sDatepicker_changed」はコードビハインドコードです。

 protected void sDatepicker_changed(object sender, EventArgs e)
{//do stuff here..}

また、datepickerポップアップをまだ実行して、コードビハインド関数を使用して、このテキストボックスから7日後の終了日を別のテキストボックスに入力することもできます。

更新2

これは携帯電話でのみ機能するようです！ asp.netは、ポストバック後にTextBoxは存在しないがJavaScriptを実行することを決定したため、ブラウザでは「オブジェクトのインスタンスに設定されていないオブジェクト参照」をスローします。トピックを降りるので、もう言うことはありません。

アップデート3-私の答え

すべてソートされました:)、私の<script>..</script> とともに <Div>そして、それがモバイルデバイスであることを検出したときに、次を使用して、JavaScriptコードを実行する必要がある場合にのみ表示します：

bool IsMobile = Page.Request.Browser.IsMobileDevice;

そして

if (IsMobile == true)
{                
    mobileScript.Visible = true;
}

乾杯

トレブ。

0
FlashTrev