Question

我正在使用HTML / CSS / js构建一个非常复杂的Web应用程序。它经过测试并适用于所有主流浏览器，但也在各种无名桌面和移动浏览器上进行了测试。一切都很好......

但是当我在使用Safari的iPhone或iPad上尝试时，我注意到当我点击输入字段时（特别是在横向模式下，但有时也在纵向上），插入符号位于输入字段下方。

我一整天都在谷歌搜索解决方案，已经尝试过在StackOverflow上列出的所有可能的解决方法，但没有成功。从将position:fixed添加到正文和position:absolute添加到容器，再到最复杂的Javascript解决方法，但都没有工作。

我还需要提一下我的输入字段不在模态窗口中。

我有很多输入字段，而我的整个网站都是围绕AJAX构建的，所以我需要一个适用于动态添加输入的解决方案。

请以横向模式访问此网站并尝试点击输入字段，您会看到我的问题：https://dokirex.hu

因为其他一切都失败了，我需要一个艰难的解决方法，比如隐藏插入符并使用js重新绘制它，在键盘出现时禁用正文滚动，或者别的东西。我尝试了其中的一些，但我遇到了另一个问题，我不能使用$(elem).focus().

来显示键盘

请不要怪我，因为我还没有发布任何代码;我已经尝试过在SO和Google上列出的所有问题，但仍然没有运气。

这是登录页面：

＆＃13;

html,body {position:fixed;width:100vw;height:100vh;margin:0;padding:0;top:0;bottom:0;left:0;right:0;overflow:auto;overflow-x:hidden;background:#98bede}
input[type="text"],input[type="password"],select,.form-ctrl > button, .login button, div[contenteditable] {display:block;width:100%;height:30px;margin:0;padding:0;background:#fff;border:none;outline:none;border-radius:3px;}
.login-box {position:fixed;left:50%;top:50%;width:75%;max-width:500px;transform:translate(-50%,-50%);}
.login {width:100%;height:130px;box-sizing:border-box;padding:10px;margin:0 auto;border-radius:3px;}
.login input[type="text"],.login input[type="password"],#eeszt-login input, .login div[contenteditable] {margin-bottom:10px;float:left;text-align:center;}
.login input[type="text"]:first-child {margin-right:10px;}
.login a {display:block;width:calc(50% - 5px);height:30px;padding:8px 0;border-radius:3px;box-sizing:border-box;float:left;color:#333;text-align:center;transition:background .5s,color .5s;cursor:pointer;}
.login a.active {color:#fff;background:#98bede;}
.login button {width:calc(50% - 5px);float:right;cursor:pointer;transition:background .5s,color .5s;}	
.login-box {position:relative;max-width:75%;left:0;margin-left:12.5%;top:0;margin-top:50px;margin-bottom:50px;transform:none;}
#forgot {font-size:12px;}
#forgot.active + button {font-size:12px;}

＆＃13;

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
	<body>
		<header class="logo-center">
			<img class="logo center" src="https://dokirex.hu/css/img/ks_logo.png" />
		</header>
		<div class="login-box">
			<section class="login">
				<form id="login-form" action="/login" method="post">
					<input type="text" name="username" placeholder="Username">
					<input type="password" name="password" placeholder="Password">
					<a id="forgot">Forgot password</a>
					<button id="login" data-login="Login" data-reset="Reset">Login</button>
					<div class="clear"></div>
				</form>
			</section>
		</div>
	</body>
</html>

＆＃13;

iOS / Safari

0 个答案: