当屏幕键盘出现在手机中时,窗体会隐藏起来
form hides as the onscreen keyboard appears in mobile
这是jsfiddle链接https://jsfiddle.net/109qve4t/
这是一个移动网站设计的代码。我面临的问题是,我的窗体在窗口上保持静态。但我想要的是,当用户在"输入您的起始城市"文本框中写入查询时,表单应该跳到窗口顶部。我不想用jquery来完成它。
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
img.bg {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}
@media screen and (max-width: 1024px){
img.bg {
left: 50%;
margin-left: -512px; }
#form_1 {
width: 20%;
}
}
#form_1 {
position: relative;
border-radius: 15px;
width: 80%;
margin: 15% auto;
padding: 20px;
background: white;
-moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
display: table;
border :solid 2px black;
padding: 15px;
}
.row {
display:table-row;
}
.row label {
text-align: right;
}
</style>
</head>
<body>
<div id="yt" >
<img src="bg.jpg" class="bg">
<form id="form_1" tabindex="0">
<label>Enter Starting City</label>
<div class="row">
<input type="text" name="s_city"></br>
</div>
<div class="row">
<label>Wait While The Cities Appear
</label></br>
<textarea rows="10" cols="30"></textarea></br>
<div class="row">
</form>
</div>
</body>
</html>
我认为如果没有jquery或其他javascript,您无法做到这一点。大多数情况下,您必须检测子元素(输入)上的焦点/模糊,然后修改父元素(表单)。CSS规则没有改变父行为的能力。
需要某种用户操作。使用jQuery的解决方案如下:
https://jsfiddle.net/6gbk76fx/4/
$(function () {
$('form input, form textarea').on("focus", function (event) {
$(event.target).closest('form').addClass('jump');
});
$('form input, form textarea').on("blur", function (event) {
$(event.target).closest('form').removeClass('jump');
});
});
相关文章:
- 防止Iframe窗体在新窗口中打开
- Meteor-将选定窗体中的对象添加到集合中
- 如何在窗体打开时从javascript倒计时计时器值中节省时间
- 主干窗体隐藏字段未呈现
- 如何首先设置样式<td>表中包含在窗体中的元素
- 如何添加CSS&JavaScript进入Windows窗体应用程序C#.net
- 如何将窗体的子元素居中
- 显示嵌套窗体
- 根据输入的数据重定向到页面的窗体
- 将文本框中的值用于按钮窗体操作上的变量
- 仅为一个窗体运行应用程序脚本
- 在EXT窗体面板中填充EXT JS存储
- 模型数据未通过窗体传播到控制器ASP.NET MVC4
- 在运行时使用jquery准备表体会导致设计问题
- WebMethod在ASP.Net Web角色(Web窗体)中不起作用
- 当屏幕键盘出现在手机中时,窗体会隐藏起来
- 如何使键盘在多页的Iphone窗体上消失
- 按钮点击未在弹出窗体中触发
- 如何从窗体调用外部javascript方法
- 是否可以使用Jquery操作窗体的目标窗口