<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <!--禁止iphone 输入框获取焦点自动放大页面-->

     <meta content="yes" name="apple-mobile-web-app-capable">

     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

     <style>

         html,

         body {

             padding: 0;

             margin: 0;

             height: 100%;

             width: 100%;

         }

         .container {

             display: flex;

             flex-direction: column;

             height: 100%;

             font-size: 50px;

             text-align: center;

         }

         .dialog-content {

             flex: 1;

         }

         .input-content {

             display: flex;

             margin-bottom: 20px;

         }

         #text-content {

             flex: 1;

             height: 30px;

             padding: 6px 8px;

             border: 1px solid #ccc;

             box-sizing: border-box;

         }

         #text-btn {

             height: 30px;

             line-height: 30px;

             border: 1px solid #ccc;

             width: 50px;

         }

     </style>

 </head>

 <body>

     <div class="container">

         <div class="dialog-content">

             聊天啊

         </div>

         <div class="input-content">

             <input id="text-content" type="text" placeholder="你输啊">

             <input id="text-btn" type="button" value="发送">

         </div>

     </div>

     <script src="//cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>

     <script>

         document.getElementById("text-btn").onclick = function () {

             document.getElementsByClassName("dialog-content")

         }

         $("#text-btn").click(() => {

             var value = $("#text-content").val();

             if (value && value != '')

                 $('.dialog-content').append(`<p>${value}</p>`);

             $("#text-content").val('');

         });

         $(".dialog-content").click(() => {

             $("#text-content").blur();

         });

         //九宫格输入和其他输入法切换隐藏元素

         setInterval(() => {

             document.activeElement.scrollIntoView();

         }, 100);

     </script>

 </body>

 </html>






 


												


											
弹性布局解决ios输入框遮挡input的更多相关文章
	

    
								
  1. 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
		
    该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
    
		
    2. 
						
  2. 解决ios手机中input输入框光标过长的问题
		
    修改前css部分代码: .receiving-info .receiving-info-list input { display: inline-block; width: 70%; font-siz ...
    
		
    3. 
						
  3. ios 输入框问题
		
    去除ios输入框阴影 input,textarea{-webkit-appearance:none; outline: none; } ios有边框时设置boder-radius:0: 去除默认圆角问 ...
    
		
    4. 
						
  4. 【前端开发】解决ios设备上fixed浮动的input输入框兼容问题
		
    我们在开发移动端页面时,经常会存在这种需求,在页面顶部或底部有一个输入框,一直浮动在顶部或底部位置,中间部分的内容是可以滚动的.比如底部输入框的搜索功能,或底部输入框的写评论功能. 这种问题,我们一般 ...
    
		
    5. 
						
  5. 移动端ios 输入框fixed固定在底部 焦点时乱跳加遮盖问题的解决 转自zhangyunling 加个人项目解决方案
		
    如果您有过移动端的开发经验,那么您是否碰到过这样的问题,一个页面有输入框,当这个输入框聚焦时,输入框在IOS下,被移动到手机屏幕的当中去了,而在Android端,有些浏览器的输入框,会被键盘盖住. 1 ...
    
		
    6. 
						
  6. fastclick使用与 fastclick ios11.3相关bug原因(ios输入框点击变得不灵敏,ios input失焦后，页面上移，点击不了)
		
    FastClick 移动设备上的浏览器默认会在用户点击屏幕大约延迟300毫秒后才会触发点击事件,这是为了检查用户是否在做双击.为了能够立即响应用户的点击事件,就有了FastClick. 安装fastc ...
    
		
    7. 
						
  7. iOS 键盘遮挡输入框万能解决方案（多个输入框）
		
    效果图如下: 思路分析: 代码: 知识点: 问题: 效果图如下: 思路分析: 当我们有很多输入框时,有时候键盘弹出来会遮挡着输入框.我们需要获取输入框和键盘相对于最外层视图的位置来判断是否遮挡,如果遮 ...
    
		
    8. 
						
  8. 解决ios下部分手机在input设置为readonly属性时，依然显示光标
		
    解决ios下部分手机在input设置为readonly属性时,依然显示光标 在出现如上所说的问题是尝试给input 加上  onfocus="this.blur()"  方法 添加 ...
    
		
    9. 
						
  9. HTML-移动开发技巧 响应式布局 弹性布局
		
    移动开发常用技巧 [viewport基本知识] 设置布局viewpoint的各种信息 1.width=device-width;设置viewport视口宽度等于设备宽度 2.initial-scale ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. APACHE如何一个站点绑定多个域名？
			
    大家肯定遇到过这样的情况,需要APACHE2里一个站点绑定多个域名,那么如何操作呢?用ServerAlias 以前很笨,要使多个域名指向同一站点总是这样写: ServerAdmin admin@dom ...
    
			
    2. 
						
  2. 转 string和byte[]的转换 (C#)
			
    转 string和byte[]的转换 (C#)  string类型转成byte[]: byte[] byteArray = System.Text.Encoding.Default.GetBytes  ...
    
			
    3. 
						
  3. 加域（Netdom）
			
    客户端运行: netdom.exe join %computername% /domain:testw.com /userd:testw\adadmin /passwordd:boc.123 /reb ...
    
			
    4. 
						
  4. C#中IL, CTS, CLR, CLS, JIT含义
			
    1. IL/MSIL  (Microsoft Intermediate Language) 微软中间语言 (IL是MSIL的缩写,译为中间语言) 2. CTS  (Common Type System ...
    
			
    5. 
						
  5. SQL连接的分类
			
    连接的分类 内连接 等值连接(INNER JOIN) 自然连接(NATURAL JOIN) 交叉连接(CROSS JOIN) 不等连接 外连接 左外连接(LEFT OUTER) 右外连接(RIGHT  ...
    
			
    6. 
						
  6. 克隆对象__clone()方法
			
    有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...
    
			
    7. 
						
  7. 使用TryUpdateModel进行数据更新
			
    在控制器中可以使用TryUpdateModel或者UpdateModel方法来对指定的数据Model进行更新,如图所示的更新操作. POST请求数据如下所示 使用如下代码就可以对指定的字段进行更新 使 ...
    
			
    8. 
						
  8. 套接字和标准I/O缓冲区
			
    设置标准I/O函数缓冲区的主要目的是为了提高性能.但套接字中的缓冲主要是为了实现TCP协议而设立的.例如,TCP传输中丢失数据时将再次传递,而再次发送数据则意味着在某地保存了数据.存在什么地方呢?套接 ...
    
			
    9. 
						
  9. 省事之通用Makefile模版
			
    现在编译方案都偏爱使用cmake解决问题,这两条做unity插件,还是用Makefile,居然忘得光光,好记性不如烂笔头. 后面,翻箱倒柜找到以前为炼金术写的Makefiel,发现还真是挺好用,贴出来 ...
    
			
    10. 
						
  10. linux下常用命令：
			
    常用指令 ls        显示文件或目录 -l           列出文件详细信息l(list) -a          列出当前目录下所有文件及目录,包括隐藏的a(all) mkdir     ...
    
			
    11.