<!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. java基础问题解答
			
    Java学习中的问题   一 枚举类型: 下面是一段源程序代码: package Demo; public class Enum { public static void main(String[]  ...
    
			
    2. 
						
  2. ASP.NET Core 返回文件、用户下载文件，从网站下载文件，动态下载文件
			
    ASP.NET Core 中,可以在静态目录添加文件,直接访问就可以下载.但是这种方法可能不安全,也不够灵活. 我们可以在 Controller 控制器中 添加 一个 Action,通过此Action ...
    
			
    3. 
						
  3. 环信REST API python SDK
			
    今天鼓起勇气,决定把这个贡献出来.不敢误人子弟,也一直担心,在不良质量的产品会祸害人,但自己已经使用,它本身也没技术. 平庸的代码,高效地实用,为环信贡献点力,如有问题,欢迎斧正,一起学习,一起成长, ...
    
			
    4. 
						
  4. Angular2 Pipe
			
    AngularJs 1.x 中使用filters来帮助我们转换templates中的输出,但在Angular2中使用的是pipes,以下展示Angular 1.x and Angular 2中filt ...
    
			
    5. 
						
  5. 解决pycharm 提示no  tests were found的问题
			
    在使用pycharm,做日志模块封装,代码中觉得没有问题,运行就提示no  tests were found 查询了下这个问题,原因是我创建的类名是以test方法开头,类似这样 不知道是不是把它默认当 ...
    
			
    6. 
						
  6. angularJs的过滤器扩展及自定义过滤器
			
    一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...
    
			
    7. 
						
  7. BZOJ4987:Tree(树形DP)
			
    Description 从前有棵树. 找出K个点A1,A2,…,Ak. 使得∑dis(AiAi+1),(1<=i<=K-1)最小. Input 第一行两个正整数n,k,表示数的顶点数和需要 ...
    
			
    8. 
						
  8. AI-Info-Micron：用内存解决方案演化神经网络智能
			
    ylbtech-AI-Info-Micron:用内存解决方案演化神经网络智能 1.返回顶部 1. 用内存解决方案演化神经网络智能 我们的大脑每天会进行数千次极其复杂的操作.无论是提醒我们小心被炉子烫到 ...
    
			
    9. 
						
  9. Kali-linux无线网络嗅探工具Kismet
			
    如果要进行无线网络渗透测试,则必须先扫描所有有效的无线接入点.刚好在Kali Linux中,提供了一款嗅探无线网络工具Kismet.使用该工具可以测量周围的无线信号,并查看所有可用的无线接入点.本节将 ...
    
			
    10. 
						
  10. $_cookie的使用
			
    设置并发送 cookie: <?php $value = "my cookie value"; // 发送一个简单的 cookie setcookie("TestC ...
    
			
    11.