0

私はjqmを使用しています。実際、ボタンをクリックするとポップアップ画面が開きます。テキストの入力中にポップアップ画面が表示されるという問題に直面しています。これが私のコードです..

http://jsfiddle.net/ravi1989/7JqRG/

 <div data-role="page" id="Home" > 
        <div data-role="header" data-theme="b" data-position="fixed" data-tap-toggle="false" >
            <h1 class="ui-title"  id="hdr" style="text-align:left;margin-left: 20px;">My Cases</h1>
            <div class="ui-btn-right" id="headerButtons" data-role="controlgroup" data-type="horizontal">
                <a href="#UserSettingScreen" data-transition="none" data-role="button" data-inline="true" data-iconpos="notext" data-icon="gear" data-theme="b" id="Setting" data-rel="popup" data-position-to="window">Setting</a>
                <a href="#CaseInformationScreen" data-transition="none" data-role="button" data-iconpos="notext" data-inline="true" data-icon="plus" data-theme="b" data-rel="popup" id="Add" data-position-to="window">Add</a>
                <a href="" data-role="button" data-transition="none" data-inline="true" data-theme="b" data-rel="popup"id="Edit" data-position-to="window">Edit</a>
            </div>
        </div>

        <div data-role="content">

            <ul data-role="listview" data-inset="true" id="folderData" >
            </ul>
            <!-- **************Case Information Pop up Start*******************-->
            <div data-role="popup" id="CaseInformationScreen" data-close-btn="none"  data-overlay-theme="a" data-dismissible="false">
                <div data-role="header" data-theme="b" >

                    <a href="#" data-role="button" data-corners="false" id="Cancel">Cancel</a>
                    <h1>Case Information</h1>
                    <a href="#" data-role="button" data-corners="false" id="AddButton">Add</a>
                </div>

                <div data-role="content">
                    <div><img src="img/Documents.png"/></div>
                    <div data-role="fieldcontain">
                        <label for="text-12" style="text-align:top;margin-left: 0px;">Case Name:</label>
                        <input name="text-12" id="text-12" value="" type="text" class="caseName_h" autocorrect="off">
                    </div>
                    <div data-role="fieldcontain">
                        <label for="caseDate" style="text-align:left;margin-left: 0px;" >Case Date:</label>
                        <input name="caseDate" id="caseDate" value="" type="date" class="caseDate_h" >
                           <!--input name="mydate2" id="mydate2" type="date" data-role="datebox" class="caseDate_h" data-options='{"mode": "calbox","useNewStyle":true,"zindex":1200}'/-->
                    </div>
                    <div data-role="fieldcontain">
                        <label for="textarea-12">Case Notes :</label>
                        <textarea cols="40" rows="8" name="textarea-12" id="text-12" class="caseTextArea_h" autocorrect="off"></textarea>
                    </div>
                </div>
            </div>

+ ヘッダーのボタンを押してください。ポップアップを開いて、テキストを黒く塗りつぶしてください。

4

1 に答える 1

0

これがあなたの答えです.. 仮想キーボードによるwindow.resizeはjquery mobileで問題を引き起こします

1) Go into jquery.mobile-1.x.x.js

2) Find $.mobile = $.extend() and add the following attributes:

last_width: null,
last_height: null,
3) Modify getScreenHeight to work as follows:

getScreenHeight: function() {
    // Native innerHeight returns more accurate value for this across platforms,
    // jQuery version is here as a normalized fallback for platforms like Symbian

    if (this.last_width == null || this.last_height == null || this.last_width != $( window ).width())
    {
        this.last_height = window.innerHeight || $( window ).height();
        this.last_width = $(window).width();
    }
    return this.last_height;
}
于 2013-07-26T05:06:49.320 に答える