HTML 内容文本字段不起作用答案

【问题标题】：HTML content textfield not workingHTML 内容文本字段不起作用
【发布时间】：2013-09-02 04:43:42
【问题描述】：

当我单击文本字段时，我在我的 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'
               }]
        });

我应该做些什么来启用文本字段？请帮助我

【问题讨论】：

我没明白，你想做什么？
当我点击文本字段时，iphone 中没有显示键盘

标签： html iphone extjs sencha-touch-2

【解决方案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。单击用户界面，然后单击表单。您也可以查看源代码。

【讨论】：