booststrap令牌字段在iOS safari中激活时会展开。如何解决?
Bootstrap tokenfield网站 以下是我的测试代码:booststrap令牌字段在iOS safari中激活时会展开。如何解决?,ios,twitter-bootstrap,mobile-safari,bootstrap-tokenfield,Ios,Twitter Bootstrap,Mobile Safari,Bootstrap Tokenfield,Bootstrap tokenfield网站 以下是我的测试代码: <html> <head> <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> <script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js">&
<html>
<head>
<script type="text/javascript"
src="https://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/bootstrap-tokenfield.js"></script>
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<LINK
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/bootstrap-tokenfield.css"
rel="stylesheet" type="text/css">
<LINK
href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"
rel="stylesheet" type="text/css">
<LINK
href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-tokenfield/0.12.0/css/tokenfield-typeahead.css"
rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
function make_tokenfield() {
$('#tokenfield').tokenfield({
autocomplete: {
source: ['red','blue','green','yellow','violet','brown','purple','black','white'],
delay: 100
},
showAutocompleteOnFocus: true
})
};
$(document).ready(make_tokenfield);
</script>
<style>
container {
border: 1px;
margin:10 auto;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<input type="text" class="form-control" id="tokenfield" value="blue"
width="80%"/>
</div>
</div>
</body>
</html>
函数make_tokenfield(){
$('#tokenfield')。tokenfield({
自动完成:{
资料来源:[“红色”、“蓝色”、“绿色”、“黄色”、“紫色”、“棕色”、“紫色”、“黑色”、“白色”],
延误:100
},
showAutocompleteOnFocus:真
})
};
$(文档).ready(生成标记字段);
容器{
边界:1px;
保证金:10美元;
}
我试着把它放到jsfiddle
中,但它扭曲了行为。你可以在这里看到:
当它第一次加载时,看起来是这样的
但是,一旦我触摸文本输入,文本输入就会扩展并占据整个屏幕的宽度(可能更多)。下拉列表的一部分被推离屏幕,因此选项不可见
代码有什么问题