1

テキストフィールドをクリックしたときに、iphone の HTML コンテンツでテストするために、sencha プロジェクトに次のコードを含めました。有効になっていないか、キーボードが表示されていません。しかし、ボタンの動作は適切に応答します

var additemspnl = Ext.create('Ext.Panel', {
    id: 'additemspnl',
    scrollable:'vertical',
    height: '100%',
    width: '100%',
   html:'<div style="padding:10px;"><input type="text" class="txtfield" id="tx   titemname" placeholder="ITEM NAME" />
         <br><input class="txtfield" id="txtitemdesc" type="text" placeholder="ITEM DESCRIPTION"/><br><input class="txtfield"  id="txtprice" type="range" name="points" min="1" max="10000">
         <br><input type="number" class="txtfield" id="txtitemprice" placeholder="PRICE"/><div>
         <table style="padding:0px;margin-bottom:0px;"><tr><td align="center"><img src="resources/img/iconaddimage.png" id="productpic" /></td>
         <td align="center"><img src="resources/img/iconshowlocation.png" id="imglocation" /></td></tr></table></div>
         <input type="text" class="txtfield" placeholder="SHOW LOCATION" id="txtlocation"/><br>
         <input type="text" class="txtfield" placeholder="WISH CATEGORY"/><br>
         <input type="text" class="txtfield" id="txtshopurl" placeholder="SHOP NAME OR URL"/><div align="center" style="padding-top:20px;">
         <img src="resources/img/buttondone.png" id="btndone"></div></div>',
        items: [{
            xtype: 'toolbar',
            ui:'light',
            docked: 'top',
            title: 'Add items'
               }]
        });

テキスト フィールドを有効にするには、どのような変更を行う必要がありますか?助けてください

4

1 に答える 1

0

投稿されたコードに 2 つの問題が見つかりました。

1) HTML 文字列が複数行を正しく処理していなかったため、各行を連結して 1 つの文字列を形成する必要がありました。

2) 高さと幅のプロパティを fullscreen: true に変更する必要がありました。

HTML フォームとツールバーが正しく表示されるようになり、これら 2 つの変更後に iOS キーボードが使用できるようになりました。

再フォーマットされたコード

    var additemspnl = Ext.create('Ext.Panel', {
        id: 'additemspnl',
        scrollable:'vertical',
        fullscreen: true,
        html:'<div style="padding:10px;"><input type="text" class="txtfield" id="tx   titemname" placeholder="ITEM NAME" />' +
        '<br><input class="txtfield" id="txtitemdesc" type="text" placeholder="ITEM DESCRIPTION"/><br><input class="txtfield"  id="txtprice" type="range" name="points" min="1" max="10000">' +
        '<br><input type="number" class="txtfield" id="txtitemprice" placeholder="PRICE"/><div>' +
        '<table style="padding:0px;margin-bottom:0px;"><tr><td align="center"><img src="resources/img/iconaddimage.png" id="productpic" /></td>' +
        '<td align="center"><img src="resources/img/iconshowlocation.png" id="imglocation" /></td></tr></table></div>' +
        '<input type="text" class="txtfield" placeholder="SHOW LOCATION" id="txtlocation"/><br>' +
        '<input type="text" class="txtfield" placeholder="WISH CATEGORY"/><br> ' +
        '<input type="text" class="txtfield" id="txtshopurl" placeholder="SHOP NAME OR URL"/><div align="center" style="padding-top:20px;">' +
        '<img src="resources/img/buttondone.png" id="btndone"></div></div>',
        items: [{
            xtype: 'toolbar',
            ui:'light',
            docked: 'top',
            title: 'Add items'
        }],            
    });

注: 生の html を実行する代わりに、Sencha Touch のフォーム パネルを調べてフォーム UI を実行したい場合があります。

ここにその例があります。[ユーザー インターフェイス]、[フォーム] の順にクリックします。ソースも表示できます。

于 2013-09-16T01:43:52.640 に答える