在Safari中跳转输入字段 [英] Jumping input fields in Safari
问题描述
我想重新创建一个非常酷的占位符用户界面仅使用HTML和CSS，我几乎可以使用它（演示）。但是，如果您在输入字段中键入内容，并且选项卡关注下一个，则刚输入的值将在Safari（6.0.5）和MobileSafari（iOS 6.1）中略有偏移。
要重现：
- Focus on the 'price' input field
- Enter a value
- Tab to focus the next input field
- Watch and amaze while the form eats itself
所以问题是：这是什么原因，我该如何解决？ / strong>
注意：我只是真的关心让这项工作在MobileSafari，除此之外的任何东西都是奖金。
HTML
<！DOCTYPE html&
< html>
< head>
< meta name =viewportcontent =width = device-width，initial-scale = 1.0，maximum-scale = 1.0，user-scalable = 0>
< script src =http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js>< / script>
< meta charset = utf-8 />
< title> JS Bin< / title>
< / head>
< body>
< input name =titletype =textplaceholder =Title>
< input name =pricetype =textplaceholder =Price>
< input name =locationtype =textplaceholder =特定位置（可选）>
< textarea name =descrows ='4'placeholder =说明>< / textarea>
< / body>
< / html>
CSS
* {
box-sizing：border-box;
}
body {
padding：0;
margin：0;
font-size：0;
}
输入，textarea {
position：relative;
display：inline-block;
margin：0;
outline：none;
border：0;
border-radius：0;
padding：2pt 4pt;
padding-top：8pt;
font-family：Helvetica Neue;
font-size：14pt;
font-weight：lighter;
}
:: - webkit-input-placeholder {
color：lightgrey;
position：relative;
top：0;
left：0;
-webkit-transition-property：top，color;
-webkit-transition-duration：.1s;
transition-property：top，color;
transition-duration：.1s;
}
:: - webkit-input-placeholder [style * = hidden] {
color：rgb（16,124,246）
font-size：8pt;
font-weight：normal;
top：-8pt;
opacity：1;
visibility：visible！important;
}
[name = title] {
width：100％;
border-bottom：1px solid lightgrey;
margin-bottom：1px;
}
[name = price] {
width：30％;
margin-bottom：1px;
border-bottom：1px solid lightgrey;
border-right：1px solid lightgrey;
}
[name = location] {
width：70％;
border-bottom：1px solid lightgrey;
}
[name = desc] {
width：100％;
}
textarea元素解决问题：
float：left;
在Safari 6.0.5（8536.30.1）和Mobile Safari上测试
I'm trying to recreate a pretty cool placeholder UI using only HTML and CSS, and I've almost got it (demo). However, if you type something in an input field and tab to focus on the next, the one you just entered a value into will be offset a little bit in Safari (6.0.5) and MobileSafari (iOS 6.1). It works fine in Chrome (30).
To reproduce:
So the question is: what's causing this and how can I fix it?
Note: I only really care about getting this to work in MobileSafari, anything beyond that is a bonus.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<input name="title" type="text" placeholder="Title">
<input name="price" type="text" placeholder="Price">
<input name="location" type="text" placeholder="Specific location (optional)">
<textarea name="desc" rows='4' placeholder="Description"></textarea>
</body>
</html>
CSS
* {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
font-size: 0;
}
input, textarea {
position: relative;
display: inline-block;
margin: 0;
outline: none;
border: 0;
border-radius: 0;
padding: 2pt 4pt;
padding-top: 8pt;
font-family: "Helvetica Neue";
font-size: 14pt;
font-weight: lighter;
}
::-webkit-input-placeholder {
color: lightgrey;
position: relative;
top: 0;
left: 0;
-webkit-transition-property: top, color;
-webkit-transition-duration: .1s;
transition-property: top, color;
transition-duration: .1s;
}
::-webkit-input-placeholder[style*=hidden] {
color: rgb(16,124,246);
font-size: 8pt;
font-weight: normal;
top: -8pt;
opacity: 1;
visibility: visible !important;
}
[name=title] {
width: 100%;
border-bottom: 1px solid lightgrey;
margin-bottom: 1px;
}
[name=price] {
width: 30%;
margin-bottom: 1px;
border-bottom: 1px solid lightgrey;
border-right: 1px solid lightgrey;
}
[name=location] {
width: 70%;
border-bottom: 1px solid lightgrey;
}
[name=desc] {
width: 100%;
}
Adding this to your input and textarea element solves the problem:
float: left;
Tested on Safari Version 6.0.5 (8536.30.1) and Mobile Safari
这篇关于在Safari中跳转输入字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
