36

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

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

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

4

11 に答える 11

29

Rob Osborne のソリューションを少し変更したバージョンを使用したところ、iPad と iPhone でキーボードが表示されなくなりました。

$(".datePicker").datepicker({
    showOn: 'button',
    onClose: function(dateText, inst) 
    { 
        $(this).attr("disabled", false);
    },
    beforeShow: function(input, inst) 
    {
        $(this).attr("disabled", true);
    }
});
于 2010-11-19T15:14:44.410 に答える
24

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

読み取り専用の詳細については、こちらをご覧ください。

于 2011-07-29T03:59:47.730 に答える
11

それが、ユーザーが入力をぼやけさせたとブラウザーに思わせることで、この問題に対処する方法でした。表示する前にキーボードを非表示にします。

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

私が見つけた他の解決策の多くがそうではなかった私にとってはうまくいきます!

于 2014-02-05T20:30:00.700 に答える
4

次のように、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 のキーボードを表示するか、日付ボタンをクリックして日付ピッカーを使用して、日付を手動で編集できることです。

この問題に関するすべての素晴らしい意見に感謝します。上記の投稿を読むまで、私はこの同じ問題に悩まされていました。

于 2010-12-14T16:07:31.230 に答える
1

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

$("#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,
     ...
于 2010-09-18T19:21:13.280 に答える
0

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

アイデアは、キーボードが表示されないように要素のマウス イベント ( pointer-events: 'none')を無効にしてから、要素をラップする親にイベントを追加することです。その後、イベントは日時ピッカーを開く必要があります。inputonclickdivinputonclick

コード例

これは、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.$);
于 2016-11-07T12:54:09.303 に答える
0

3時間後、どこにも行きません。私は Iphone を持っていないので、2.3 を実行している Android フォンで上記を試しています。

私の電話では、私はまだキーパッドを毎回取得していますが、それを止めるものは何もありません.asp.net4/C#コードの発火を止めるため、「読み取り専用」を使用することはできません。

私の最初の質問は、これらのアイデアは 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>を aで囲み、コード<Div>を実行する必要がある場合にのみ、それがモバイルデバイスであることを検出したときに、次を使用して表示します:JavaScript

bool IsMobile = Page.Request.Browser.IsMobileDevice;

と

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

乾杯

トレヴ。

于 2015-01-31T16:07:33.970 に答える
-1

DatePicker の最新バージョンを使用すると、次のように実行できます。

//for tablets / phones
    $('#yourElement').datepicker().on('show', function (e) {
        $(this).trigger('blur');
    })

ただし、blur() が実行されるまで、キーボードが画面の下部で 1 秒間点滅する場合があることに注意してください。

于 2014-06-19T09:53:35.973 に答える