弹性布局解决ios输入框遮挡input

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="UTF-8">
 6     <!--禁止iphone 输入框获取焦点自动放大页面-->
 7     <meta content="yes" name="apple-mobile-web-app-capable">
 8     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 9     <meta http-equiv="X-UA-Compatible" content="ie=edge">
10     <title>Document</title>
11     <style>
12         html,
13         body {
14             padding: 0;
15             margin: 0;
16             height: 100%;
17             width: 100%;
18         }
19 
20         .container {
21             display: flex;
22             flex-direction: column;
23             height: 100%;
24             font-size: 50px;
25             text-align: center;
26 
27         }
28 
29         .dialog-content {
30             flex: 1;
31         }
32 
33         .input-content {
34             display: flex;
35             margin-bottom: 20px;
36         }
37 
38         #text-content {
39             flex: 1;
40             height: 30px;
41             padding: 6px 8px;
42             border: 1px solid #ccc;
43             box-sizing: border-box;
44         }
45 
46         #text-btn {
47             height: 30px;
48             line-height: 30px;
49             border: 1px solid #ccc;
50             width: 50px;
51         }
52     </style>
53 </head>
54 
55 <body>
56     <div class="container">
57         <div class="dialog-content">
58             聊天啊
59         </div>
60         <div class="input-content">
61             <input id="text-content" type="text" placeholder="你输啊">
62             <input id="text-btn" type="button" value="发送">
63         </div>
64     </div>
65     <script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
66     <script>
67         document.getElementById("text-btn").onclick = function () {
68             document.getElementsByClassName("dialog-content")
69         }
70         $("#text-btn").click(() => {
71             var value = $("#text-content").val();
72             if (value && value != '')
73                 $('.dialog-content').append(`<p>${value}</p>`);
74 
75             $("#text-content").val('');
76         });
77         $(".dialog-content").click(() => {
78             $("#text-content").blur();
79         });
80         //九宫格输入和其他输入法切换隐藏元素
81         setInterval(() => {
82             document.activeElement.scrollIntoView();
83         }, 100);
84     </script>
85 </body>
86 
87 </html>
posted on 2018-08-14 17:56 郭_小_宁阅读(396) 评论(0) 编辑收藏举报