<!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. Python初探-Pycharm，Anaconda-人脸识别
			
    版权声明:博客版权所有,转载注明出处. https://blog.csdn.net/qq_33083551/article/details/82253026 1.建议先安装Anaconda,再安装Py ...
    
			
    2. 
						
  2. linux下部署redis
			
    基础知识: 1.Redis的数据类型: 字符串.列表(lists).集合(sets).有序集合(sorts sets).哈希表(hashs)2.Redis和memcache相比的独特之处: (1)re ...
    
			
    3. 
						
  3. 关闭TCP中135、139、445、593、1025 等端口的操作方法 (转)（记录下）
			
    操作要领:封闭端口,杜绝网络病毒对这些端口的访问权,以保障计算机安全,减少病毒对上网速度的影响. 近日发现有些人感染了新的网络蠕虫病毒,该病毒使用冲击波病毒专杀工具无法杀除,请各位尽快升级计算机上的杀 ...
    
			
    4. 
						
  4. postman trigger xdebug session in phpstorm
			
    phpstorm是一款非常棒的php开发调试工具,一般情况下我们使用firefox/chrome的bookmark,开启phpstorm debug侦听,随后点击start debugger, 我们就 ...
    
			
    5. 
						
  5. iOS设计模式 - 桥接
			
    iOS设计模式 - 桥接 示意图 说明 1. 桥接模式为把抽象层次结构从实现中分离出来,使其可以独立变更,抽象层定义了供客户端使用的上层抽象接口,实现层次结构定义了供抽象层次使用的底层接口,实现类的引 ...
    
			
    6. 
						
  6. [翻译] ATTutorialController
			
    ATTutorialController https://github.com/AfonsoTsukamoto/ATTutorialController A simple to use tutoria ...
    
			
    7. 
						
  7. cocos ide使用binding-generator导出来的c++类
			
    time:2015/03/19 cocos版本:3.2 描述:用了ide运行一个实例[1]的时候需要增加c++类,正确导出来之后,直接使用vs2012启动是没有问题的,但是使用ide启动却提示找不到模 ...
    
			
    8. 
						
  8. Python学习---JSON学习180130
			
    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON是用字符串来表示Javascript对象: Json字符串就是js对象的一种表现形式(字符串的形式 ...
    
			
    9. 
						
  9. PHP-FPM详解
			
    目录 作用 安装 全局配置 配置进程池 参考Company开发环境 转发请求给PHP-FPM 思考 作用 PHP-FPM(PHP FastCGI Process Manager)意:PHP FastC ...
    
			
    10. 
						
  10. ab 压测工具使用
			
    转自:http://www.cnblogs.com/lemtree/articles/1676641.html 就是APACHE自带的测试工具AB(apache benchmark).在APACHE的 ...
    
			
    11.