Input获取焦点并弹出软键盘 demo4

【解决后】两个absolute状态下的input

by q3011893

HTML

<input id="a" type="text">
<input id="b" type="text">1
<br/>2
<br/>3
<br/>4
<br/>5
<br/>6
<br/>7
<br/>8
<br/>9
<br/>10
<br/>11
<br/>12
<br/>13
<br/>14
<br/>15
<br/>16
<br/>17
<br/>18
<br/>19
<br/>20
<br/>21
<br/>22
<br/>23
<br/>24
<br/>25
<br/>26
<br/>27
<br/>28
<br/>29
<br/>30
<br/>31
<br/>32
<br/>33
<br/>34
<br/>35
<br/>

CSS

input#a {
      position: absolute;
      top: 40%;
    }
    
    input#b {
      position: absolute;
      top: 80%;
    }

JavaScript

$("input").focus(function() {
  var t = $(this);
  setTimeout(function() {
    var elem_top = t.offset().top;
    var window_height = window.innerHeight;
    var elem_height = t.outerHeight();
    var scroll = elem_top - window_height + elem_height;
    t.val(elem_top + "," + window_height + "," + elem_height + "," + scroll);
    $(this).attr("scroll", scroll);
    $("html,body").animate({
      scrollTop: scroll
    }, 500);
  }, 100);

});
$("input").blur(function() {
  $("html,body").animate({
    scrollTop: "-" + $(this).attr("scroll")
  }, 500);
})