Question

我想在点击输入元素的正下方弹出软键盘。我的确切情况是当我点击输入元素（在Android智能手机上）时，整个页面（即整个DOM）上升为软键盘腾出空间。我不想要这种行为。我想要的是，软键盘应该弹出而不移动实际页面。

有没有办法做到这一点？我尝试了改变位置属性，但没有任何效果。

这是我的代码：

<div data-role="page" id="home"  data-theme="a" style="background-color:white">
        <!--header-->
        <div data-role="header" data-theme="a">
            <img src="img/hd.jpg" style="width:100%;z-index:0;">
            <p><strong>BOOKing ONLINE</strong></p>
            <a href="#splash" data-transition="slide" data-direction="reverse" data-shadow="false" class="ui-btn ui-nodisc-icon ui-btn-icon-notext ui-icon-carat-l" >Back</a>
            <a href="#" class="ui-btn ui-nodisc-icon ui-btn-icon-notext ui-icon-bars">Menu</a>
        </div>
        <div data-role="fieldcontainer" style="margin: 19% 0% 0% 0%">
            <center>
                <form>
                    <fieldset data-role="controlgroup" data-type="horizontal">
                    <legend></legend>
                    <input type="radio"  name="radio-choice-h-2" id="radio-choice-h-2a" value="on" checked="checked">
                    <label for="radio-choice-h-2a">Domestic</label>
                    <input type="radio" name="radio-choice-h-2" id="radio-choice-h-2b" value="off">
                    <label for="radio-choice-h-2b">International</label>
                    </fieldset>
                </form>
            </center>
        </div>
        <div style="margin:9% 0% 0% 0%">
            <hr>
        </div>
        <div class="ui-grid-b center" style="margin:6% 0% 0% 0%">
            <div class="ui-block-a"><a href="#pin_list" id="pin1" data-transition="slideup" class="ui-btn ui-btn-inline ui-shadow ui-corner-all" >From</a></div>
            <div id="fromto" class="ui-block-b" style="margin: 0% -20% 0% 11%"><a href="#" class="ui-btn ui-icon-arrow-r ui-state-disabled ui-btn-icon-notext ui-corner-all" style="filter: Alpha(Opacity=90);opacity: .9;">No text</a>
            </div>
            <div class="ui-block-c"><a href="#pin_list" id="pin2" data-transition="slideup" class="ui-btn ui-btn-inline ui-shadow ui-corner-all">To</a></div>
        </div>
        <div style="margin:6% 0% 0% 0%">
            <hr>
        </div>
        <div data-role="controlgroup" data-type="horizontal" align='center' style="margin:7% 0% 0% 0%">
            <a href="#" class="ui-btn ui-corner-all ui-alt-icon ui-icon-mail ui-btn-icon-left ui-nodisc-icon ui-btn-active">mail</a>
            <a href="#" class="ui-btn ui-corner-all ui-alt-icon ui-icon-shop ui-btn-icon-left ui-nodisc-icon">shop</a>
        </div>
        <div style="margin:6% 0% 0% 0%">
            <hr>
        </div>
        <table id="weightTable">
            <tr >
                <td style="text-align:right;width:40%">WEIGHT</td>
                <td style="text-align:center"><input data-type="number" type="number" value="0.5" id="weight"></td>
                <td style="text-align:left;width:40%">kg</td>
            </tr>
        </table>
        <div align=center style="margin:2% 0% 0% 0%">
            <a id='getq' class="ui-btn ui-btn-inline ui-icon-carat-r ui-btn-icon-right ui-corner-all ui-nodisc-icon">GET</a>
        </div>
        <div data-role="navbar" align=center style="margin:2% 0% 0% 0%;width:100%;">
            <ul>
                        <li ><a href="#">menu</a></li>
                        <li style="width:50%"><a href="#track" data-transition="slideup" class="ui-btn ui-alt-icon ui-icon-search ui-btn-icon-top ui-nodisc-icon">Track</a></li>
                        <li style="width:25%"><a href="#" class="ui-btn ui-alt-icon ui-icon-bullets ui-btn-icon-top ui-nodisc-icon">More</a></li>
            </ul>
        </div>
    </div>

当我点击整个页面向上移动的元素时，您可以在#weightTable找到一个输入字段，在导航栏下方出现软键盘。我希望通过隐藏后面的内容将它显示在输入字段的正下方。请帮帮我。

这是img：

enter image description here

Android键盘中软键盘的位置

0 个答案: