<!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. Git与Github。
			
    Git是一款免费,开源的分布是版本,用于敏捷高效的处理任何或小或大的项目.分布式相对于集中式的最大区别在于开发者可以提到本地,每个开发者通过克隆,在本地磁盘内拷贝一个完整的GIt仓库. Git的功能特 ...
    
			
    2. 
						
  2. awk 正则表达式、正则运算符详细介绍
			
    前言:使用awk作为文本处理工具,正则表达式是少不了的. 要掌握这个工具的正则表达式使用.其实,我们不必单独去学习它的正则表达式.正则表达式就像一门程序语言,有自己语法规则已经表示意思. 对于不同工具 ...
    
			
    3. 
						
  3. Ionic控件之——按钮（Button)
			
    Ionic提供丰富的按钮特性,足以满足大部分的按钮实现需求. 一.HTML实现一个简单按钮: <button class="button"> 我是按钮 </but ...
    
			
    4. 
						
  4. 海量数据处理面试题(2) 将用户的query按出现频度排序
			
    问题描述: 有10个文件,每个文件1G,每个文件的每一行存放的都是用户的query,每个文件的query都可能重复.要求你按照query的频度排序. 分析:一般海量数据采用分治法时,都要用到哈希,将相 ...
    
			
    5. 
						
  5. Java学习---程序设计_基础题[1]
			
    180813 补全没有的答案! 0. 数组排序大全[冒泡/选择/快速/插入] package com.ftl; import java.io.BufferedReader; import java.i ...
    
			
    6. 
						
  6. Radix Sorts
			
    基数排序 Strings In Java Char Data Type C 语言中的字符数据类型占一个字节(8 比特),最多只能表示 256 个字符.支持 7 位的标准 ASCII(American  ...
    
			
    7. 
						
  7. 关于memcpy的实现
			
    今天去面试,面试官出了一个关于memcpy的函数原型的实现的问题,本来这个问题是很简单的,但是不知道当时怎么脑子一抽竟然写错了,真是”累觉不爱”了.感觉这份工作算是泡汤了,算了事情发生了,错过了也就错 ...
    
			
    8. 
						
  8. 解析Java对象的equals()和hashCode()的使用
			
    解析Java对象的equals()和hashCode()的使用 前言 在Java语言中,equals()和hashCode()两个函数的使用是紧密配合的,你要是自己设计其中一个,就要设计另外一个.在多 ...
    
			
    9. 
						
  9. 泛型和 Any 类型
			
    泛型和 Any 类型 这两个类型看起来很相似,但是一定要小心两者的区别.他们区别在于 Any 类型会避开类型的检查,所以尽量少用最好不用.泛型一方面很灵活一方面也很安全,下面举个例子感受下两者的区别: ...
    
			
    10. 
						
  10. php回调函数数组的排序函数
			
    array_filter() array_map() sort()升序不保存key resort() asort()升序保存key arsort() ksort()根据key排序 krsort()
    
			
    11.