在非文本字段中通过JavaScript打开iPad的键盘？

问题描述

我有一个div，通过一些聪明的javascript来充当文本框。是的，有味道，但它是我无法更改的供应商代码：（b / b）

在iPad上，键盘不显示，因为它不是文本字段。一种强制通过javascript打开键盘的方式，或者用告诉Safari的东西来装饰HTML是的，这是一个真正的文本框，只要相信我！？

解决方案

根据我的经验，无法通过Javascript调出iPad或iPhone键盘，我最终使用了一种可能有用的解决方法。

我只是将文本字段的不透明度设置为0而不是div，然后我更新文本字段内容的div以进行更改。

喜欢所以（使用jQuery）

  $（'textarea'）。bind（'input'，function（e）{
 var changedVal = $（e.currentTarget）.val（）; 
 $（'div'）。html（changedVal）; 
}）; 
 
 //输入事件不是跨浏览器解决方案，请使用
 //的组合键盘和鼠标事件正确响应textarea中的任何更改
  

如果您的供应商代码依赖于键盘或鼠标事件侦听器来做它的魔法，你可以将所有事件类型代理到下面的div中。

类似于（使用jQuery）

  $（'textarea'）。bind（'keyup keydown keypress mouseup mousedown click'，function（e）{
 e.currentTarget = $（' 。DIV'）得到（0）; 
 $（'div'）。trigger（e）; 
}）; 
  

I have a div that acts as a textbox through some clever javascript. Yes, that smells, but it's vendor code I can't change :(

On an iPad, the Keyboard doesn't show because it's not a text field. Is there a way to force open the Keyboard through javascript, or decorate the HTML with something that tells Safari "Yes, this is really a textfield, just trust me!"?

解决方案

From my experience there is no way to bring up the iPad or iPhone keyboard through Javascript. I ended up using a workaround that might be useful.

I simply place a text field with it's opacity set to 0 over the div in question. Then I update the div with the text field content on change.

like so ( using jQuery )

$('textarea').bind('input', function(e){
    var changedVal = $( e.currentTarget ).val();
    $('div').html( changedVal );
});

// The input event is not a cross browser solution, use a combination of
// keyboard and mouse events to correctly respond to any changes in the textarea

If your vendor code rely's on keyboard or mouse event listeners to do it's magic, you could proxy all the event types onto the div beneath.

Something like so ( using jQuery )

$('textarea').bind('keyup keydown keypress mouseup mousedown click', function(e) {
    e.currentTarget = $('div').get(0);
    $('div').trigger(e);
});

这篇关于在非文本字段中通过JavaScript打开iPad的键盘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！