寻找ibooks的html输入替代方案 [英] Looking for ibooks html input alternative

问题描述

在iPad，iPad2等的IOS5中，iBooks接受< input type =color> 作为提示您单击时显示键盘的方式一个输入字段，说，键入问题的答案。我刚刚更新到IOS6，这种解决方法似乎不再起作用。我尝试使用我在这里找到的JavaScript - http： //www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009

 < script type =text / javascript> 
 
函数iPadTouchHandler（event）{
 var type =，
 button = 0; / * left * / 
 
 if（event.touches.length> 1）
 return; 
 
 switch（event.type）{
 casetouchstart：
 
 // OLD：在iPad2上单击文本输入字段时不显示键盘
 // if（$（event.changedTouches [0] .target）.is（select））{
 // NEW：现在在iPad2上，输入字段上的touchstart-Event被忽略并且一切正常罚款
 //改变我的罗兰卡斯珀尔，Scheer管理
 if（$（event.changedTouches [0] .target）.is（select）|| $（event.changedTouches [0]。目标）.is（输入））{
 
 return; 
} 
 iPadTouchStart（event）; / *我们需要在这里触发两个事件来支持单触式拖放* / 
 event.preventDefault（）; 
返回false; 
休息; 
< / script> 
  

然而这段代码似乎已经过时并且与IOS5相关。我知道一种解决方法，即将带有输入的页面放入iFrame中，在这种情况下，您可以使用< input type =text>，但是我宁愿远离iFrame，因为它们倾向于根据输入框的位置移动内容。有关其他可能的解决方案或解决方法的想法？ Tyvm：）

解决方案

我在iOS 7的iBooks中也遇到了同样的问题。棘手的部分是，iBooks可能会让所有文本输入字段默认为禁用。我们使用prototype.js，所以这里是我为原型编写的解决方案：

  $（'my-input-field-id '）.observe（'touchstart'，function（event）{
 var element = event.element（）; 
 if（element.disabled）
 element.disabled = false; 
 element.focus（）; 
 event.stop（）; 
}）; 
  

因此，只需在输入字段中侦听touchstart事件，并在触摸时启用和对焦字段。它适用于普通文本字段（< input type =text> ）。简单： - ）。

In IOS5 on the iPad, iPad2 etc. iBooks accepted <input type="color"> as a way to prompt the keyboard to display when you clicked on an input field, to say, type in the answer to a question. I've just recently updated to IOS6, and this workaround no longer seems to be working. I tried using the JavaScript I found here - http://www.linkedin.com/groups/How-Show-iPads-Keyboard-when-3877009.S.84287009

<script type="text/javascript"> 

function iPadTouchHandler(event) { 
var type = "", 
button = 0; /*left*/ 

if (event.touches.length > 1) 
return; 

switch (event.type) { 
case "touchstart": 

// OLD: On iPad2 clicking on a text input field did not show the keyboard 
//  if ($(event.changedTouches[0].target).is("select")) { 
// NEW: Now on iPad2 the touchstart-Event on input fields is ignored and everything         works fine 
// change my by Roland Caspers, Scheer Management 
if ($(event.changedTouches[0].target).is("select") ||     $(event.changedTouches[0].target).is("input")) { 

return; 
} 
iPadTouchStart(event); /*We need to trigger two events here to support one touch drag     and drop*/ 
event.preventDefault(); 
return false; 
break; 
</script> 

However this code seems to be outdated and relevant to IOS5. I know of a workaround, which is to put the page with the input into an iFrame, in that case you can just use <input type="text">, however I'd prefer to stay away from iFrames as they tend to move the content around depending on where the input box is. Any thoughts as to other possible solutions or workarounds? Tyvm :)

解决方案

I struggled with this same problem in iBooks on iOS 7. The tricky part was, that iBooks probably makes all text input fields disabled by default. We are using prototype.js, so here is my solution written for prototype:

$('my-input-field-id').observe('touchstart', function(event) {
    var element = event.element();
    if (element.disabled)
        element.disabled = false;
    element.focus();
    event.stop();
});

So just listen for the 'touchstart' event on the input field and enable and focus the field when touched. It works for ordinary text fields (<input type="text">). Simple :-).

这篇关于寻找ibooks的html输入替代方案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！