使用phonegap开发移动应用的输入问题

Question

在使用phonegap开发移动应用的时候，遇到两个很头疼的关于输入的问题，跪求大神解决：
1. 当弹出输入发的虚拟键盘的时候，会把输入框挡住。如果通过触发focus事件把输入框上浮，那么当用户关掉输入法的时候，js里就没有事件可以触发把输入框复原到原来的位置。那么有没有办法做到像短信的输入框一样能上浮输入框且可以自动复原。

1. 我把div的contenteditable设为true，用搜狗拼音输入法(安卓版)输入词句的时候，div里每次都只能输入一个字。比如说我输入“你好”，div里只显示“你”。 那么有没有办法解决呢？如果用input的话就没办法插入表情了对吧？

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

这个问题是PhoneGap本身的一个设计缺陷，它不能支持像Android中短信和输入法那样灵活的控件，例如在手机上滑动来控制输入框位置。如果你希望实现类似的功能，你可以考虑以下几种方法：

1. 使用JavaScript来模拟输入焦点： 如果你想让输入框能够上浮并且自动复原，你可以使用JavaScript来模拟输入焦点。例如，在JavaScript中添加一个事件监听器，每当用户点击或按下输入框时，都会触发这个事件，并将其向上滚动以模拟输入焦点。 示例代码如下：

     $(document).ready(function(){
         $('#myInput').bind('click', function(e){
             e.preventDefault();
             $(this).animate({
                 scrollTop: $(this).offset().top - 20
             }, 500);
         });
     });
   

  2. 使用jQuery插件来模拟输入焦点：
    另一种方法是使用jQuery插件来模拟输入焦点。例如，你可以使用JQuery的`hover()`函数来模拟鼠标悬停效果，然后在鼠标悬停时改变元素的样式。
    示例代码如下：
      ```javascript
        $("#myInput").hover(
          function() {
              $(this).css("background-color", "red");
          },
          function() {
              $(this).css("background-color", "");
          }
        );

1. 使用CSS伪类来模拟输入焦点： 另外一种方法是在CSS中使用伪类:focus来模拟输入焦点。例如，你可以设置一个类名为input-focus，并在其中添加一些样式，使其看起来像是被聚焦。 示例代码如下：

     $("input").addClass("input-focus");
     $("input:focus").css("outline", "solid 2px red");
   

以上三种方法都可以帮助你实现类似的功能，但是它们都有各自的优缺点。例如，第一种方法虽然简单易行，但是可能会导致页面加载速度变慢；第二种方法虽然更符合HTML5标准，但是可能会影响到其他网页元素的布局；第三种方法虽然可以提供更多的控制选项，但是可能会增加开发难度。