javascript - 当输入宽度在 Safari 中变小时，表单不会缩小

Question

我用 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 中，当输入字段隐藏时，表单不会缩小，提交按钮将向左浮动，右侧有较大的空白。谁能帮帮我？

Answer 1

编辑:

好的，看来是被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;
}

希望这有助于...