html ios键盘收回后输入框点不动,iOS下Html页面中input获取焦点弹出键盘时挡住input解决方案...

再次测试，效果如下：

相比于input被挡住，突兀地出现在页面中间更加可以令人接受，但是多次测试，仍然存在问题：当切换输入法的时候，input框的位置会往下移动，被键盘挡住一部分，而且出现的概率比较高(中英文切换)，效果如下：

针对这个问题，后期仍需要继续调试和优化。

针对input输入框被虚拟键盘挡住的问题，还有一个类似的解决方案：

当软键盘被唤起是，使用 scrollTop() 方法使input元素滚动到指定的位置，但是滚动的具体数值需要调试才能给出，所以这里就不再演示了。

虚拟键盘挡住输入框一直是web开发中的一个无法避免且令人头疼的问题，希望有人能够想出的更好的办法，如果是浏览器或者系统的问题，希望官方可以尽快解决。

参考资料：

Demo 完整代码：

1

2

3

4

5

6

7

8

9 html, body {

10 height: 100%;

11 padding: 0;

12 margin: 0;

13 }

14 header {

15 position: fixed;

16 top: 0;

17 left: 0;

18 z-index: 9999;

19 width: 100%;

20 height: 50px;

21 line-height: 50px;

22 font-size: 18px;

23 text-align: center;

24 background: #ccc;

25 }

26 main {

27 position: absolute;

28 top: 50px;

29 bottom: 10px;

30 left: 20px;

31 width: 100%;

32 margin-bottom: 50px;

33 /* 使之可以滚动 */

34 overflow-y: scroll;

35 /* 增加该属性，可以增加弹性，是滑动更加顺畅 */

36 -webkit-overflow-scrolling: touch;

37 }

38 footer {

39 position: absolute;

40 bottom: 0;

41 left: 0;

42 width: 100%;

43 height: 50px;

44 line-height: 50px;

45 text-align: center;

46 background: #666;

47 border-top: 1px solid #e6e6e6;

48 }

49 footer input {

50 display: inline-block;

51 width: 90%;

52 height: 20px;

53 font-size: 14px;

54 outline: none;

55 border: 1px solid #e6e6e6;

56 border-radius: 5px;

57 }

58

59

60

61

62 This is the header

63

64

65

66

Welcome to

67

68

Today

69

is

70

Sunday

71

And

72

I

73

have

74

to

75

go

76

to

77

work

78

tomorrow

79

80

81

82

83

84

85

86 $(function() {

87 $('input').on('click', function () {

88 var target = this;

89 // 使用定时器是为了让输入框上滑时更加自然

90 setTimeout(function(){

91 target.scrollIntoView(true);

92 },100);

93 });

94 })

95

96