<!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之复数
			
    #coding=utf8 ''''' 复数是由一个实数和一个虚数组合构成,表示为:x+yj 一个负数时一对有序浮点数(x,y),其中x是实数部分,y是虚数部分. Python语言中有关负数的概念: 1 ...
    
			
    2. 
						
  2. 外部主机无法访问IIS发布的网站
			
    在IIS中发布网站,在本地可以直接访问,但是其他主机不能访问改发布的网站.   此问题一般是IIS的配置或者防火墙的配置的原因.     如果禁用了以下防火墙入站规则会导致外部主机无法访问本地发布的网 ...
    
			
    3. 
						
  3. C++课堂作业二之反转链表
			
    1问题链接: https://www.patest.cn/contests/pat-b-practise/1025 2解题想法: 这题原来用数组打过,现在是想保留暂存数据的数组,然后按顺序提取出来到创 ...
    
			
    4. 
						
  4. scala当中的对象
			
    1.scala当中的Object 在scala当中,没有类似于像java当中的static修饰的静态属性或者静态方法或者静态代码块之类的,但是我们可以通过scala当中的Object来实现类似的功能. ...
    
			
    5. 
						
  5. Xposed模块开发基本方法记录
			
    由于某些课程实验的要求,需要通过xposed框架对某应用进行hook操作,笔者选用了开源且免费的xposed框架进行实现.虽然网上存在一些利用xposed实现特定功能的文章资源,但大多均将xposed ...
    
			
    6. 
						
  6. mysql-存储过程（转载）
			
    本来想自己写存储过程的,但是看到别人写的很全面,就直接转载过来了. 转自(http://www.cnblogs.com/exmyth/p/3303470.html) 14.1.1 创建存储过程 MyS ...
    
			
    7. 
						
  7. BZOJ 1002 轮状病毒 矩阵树定理
			
    题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1002 题目大意: 给定n(N<=100),编程计算有多少个不同的n轮状病毒 思路 ...
    
			
    8. 
						
  8. What Shape Layers Are-CAShapeLayer
			
    矢量图.gpu直接使用.占用内存小 What Shape Layers Are Shape layers are layers capable of defining shapes as vector ...
    
			
    9. 
						
  9. BZOJ3791:作业(DP)
			
    Description 众所周知,白神是具有神奇的能力的. 比如说,他对数学作业说一声“数”,数学作业就会出于畏惧而自己完成:对语文作业说一声“语”,语文作业就会出于畏惧而自己完成. 今天,语文老师和 ...
    
			
    10. 
						
  10. 基于cookie和session的登录验证
			
    settings.py MIDDLEWARE = [ 'django.middleware.security.SecurityMiddleware', 'django.contrib.sessions ...
    
			
    11.