我用 javascript 编写了这个小代码:
function clicksearchicon(searchbar) {
var searchbar = document.getElementById(searchbar),
searchbar_class = searchbar.className;
if(searchbar_class == "searchbar_hidden"){
searchbar.className = "searchbar";
return false;
}
else{
if(searchbar.value == '' || searchbar.value == searchbar.defaultValue){
searchbar.className = "searchbar_hidden";
return false;
}
else{
return true;
}
}
}
html:
<form action="search.php" method="get" onsubmit="return clicksearchicon('searchbar')">
<input type="text" name="q" placeholder="Search..." class="searchbar_hidden" id="searchbar" autocomplete="off">
<input type="submit">
</form>
和CSS:
.searchbar_hidden {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
width: 0px !important;
padding: 0px !important;
margin: 0px !important;
opacity: 0;
}
.searchbar {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
width: 130px !important;
opacity: 1;
}
在 Chrome、Firefox、IE 和 Opera 中一切正常,但在 Safari 中,当输入字段隐藏时,表单不会缩小,提交按钮将向左浮动,右侧有较大的空白。谁能帮帮我?
最佳答案
编辑:
好的,看来是被ID值改变了。我已经用一个快速而肮脏的解决方案修复了它。非常直截了当,只是为了向您展示行为。对我有用:见fiddle .
HTML:
<form action="search.php" method="post" class="searchbar_hidden" onsubmit="return clicksearchicon('searchbar')" width="1" >
<input type="text" name="q" placeholder="" class="searchbar_hide" id="searchbar" autocomplete="off" />
<input type="Submit" name="nameSubmit" id="idButton_Submit" value="Submit" alt="Submit Button"/>
</form>
JavaScript:
clicksearchicon = function(searchbar){
var searchbar = document.getElementById(searchbar);
if(searchbar == null){
var searchbar = document.getElementById('searchbar_show');
}
searchbar_class = searchbar.className;
if(searchbar_class == "searchbar_hide"){
searchbar.className = "searchbar_show";
searchbar.id = "searchbar_show";
return false;
}
else{
if(searchbar.value == '' || searchbar.value == searchbar.defaultValue){
searchbar.className = "searchbar_hide";
searchbar.id = "searchbar";
return false;
}
else{
return true;
}
}
}
CSS:
#searchbar {
width:1px;
}
#searchbar_show {
width:130px;
}
.searchbar_hidden .searchbar_hide {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
width: 0x !important;
padding: 0px;
margin: 0px;
border:none;
opacity: 0;
}
.searchbar_hidden .searchbar_show {
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
width: 130px;
}
希望这有助于...
关于javascript - 当输入宽度在 Safari 中变小时,表单不会缩小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20728553/