Question

我在我的sencha项目中包含以下代码以在iphone中进行测试，在HTML内容中，当我单击文本字段时。没有启用或没有显示键盘。但是按钮工作正常响应

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'
               }]
        });

我想要做什么更改启用文本字段？请帮助我

Answer 1

我发现了发布代码的两个问题。

1）html字符串没有正确处理多行，所以我不得不连接每一行以形成一个字符串。

2）我必须将高度和宽度属性更改为全屏：true。

我能够正确显示html表单和工具栏，并且在这两个更改后，它们的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'
        }],            
    });

注意：您可能需要查看Sencha Touch的表单面板以执行表单UI，而不是使用原始html。

有一个例子here。单击用户界面，然后单击表单。您也可以查看来源。

HTML内容文本字段无法正常工作

1 个答案: