Question

我正在创建一个扩展搜索栏，但问题是当在文本输入中键入足够的字符时，它们会位于搜索按钮下方。

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

＆＃13;

padding-right

＆＃13;

$xmldata = @"
<configuration>
    <environment id="Development">
    <type>Dev</type>
    <client>Arizona%%type%%</client>
    <dataSource>Local%%client%%</dataSource>
    <path>App_Data\%%type%%\%%client%%_%%dataSource%%</path>
    <targetmachines>
        <targetmachine>
        <name>Any</name>
        <remotedirectory>D:\Inetpub\Test</remotedirectory>
        </targetmachine>
    </targetmachines>
    </environment>
</configuration>
"@

$configxml = [xml] $xmldata
$dictionary = @{}

$environmentId = "Development"
$environment = $configxml.SelectNodes("//configuration/environment[@id='$($environmentId)']") | ?{ $_.Name -ne "targetmachines" }
$environment.ChildNodes  | %{
    $dictionary.Add($_.Name, $_.'#text')
}

$environment.ChildNodes | %{
    while ($_.'#text' -match '%%([^/)]+?)%%') {
        $key = $matches[1]
        $_.'#text' = $_.'#text'.Replace('%%' + $key + '%%', $dictionary[$key])
    }
}

$configXml.Save([Console]::Out)

＆＃13;

我想在点击按钮时显示搜索栏。

我尝试将E2添加到输入文本元素，但它变得可见。

如何解决这个问题？

Answer 1

    $('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box');
        }

    });

        .form-container{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 33px 14px;
        }

        .form-container:after{
            content: '';
            display: block;
            clear: both;
        }

        form{
            position: relative;
            float: right;
        }

        .search-box{
            top: 0;
            margin: 0;
            width: 0;
            transition: width 0.3s ease-out;
            padding: 10px 0;
            padding-left: 10px;
            outline: none;
        }

        .search-submit{
            position: absolute;
            width: 110px;
            top: 0;
            right: 0;
            padding: 10px 0px;
        }

        .expanded-search-box{
            width: 470px;
            padding: 10px 10px;
            margin-right: 110px;
        }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

Answer 2

在搜索文字输入上添加maxlength="20"

Answer 3

＆＃13;

$('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
                        searchbox.removeClass('padding');
            searchbox.addClass('search-width');


        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box ');
            searchbox.addClass('padding');
            searchbox.addClass('search-width');
        }

    });

＆＃13;

.form-container{
                width: 600px;
                margin: 0 auto;
                border: 1px solid #000;
                padding: 33px 14px;
            }
    .search-width{
        	width: 0px;
        }
            .form-container:after{
                content: '';
                display: block;
                clear: both;
            }

            form{
                position: relative;
                float: right;
            }

            .search-box{
                top: 0;
                right: 0;
                width: 70px;
                transition: width 0.3s ease-out;
                padding: 10px 0px;
                padding-left: 10px;
                outline: none;
                
            }
            .padding{
            	padding-right: 85px;
            }

            .search-submit{
                position: absolute;
                width: 85px;
                top: 0;
                right: 0;
                padding: 10px 0px;
            }

            .expanded-search-box{
                width: 500px;
            }

＆＃13;

<html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


    </head>
    <body>
    <div class="form-container">
        <form action="" class="form">
            <input type="text" name="search" class="search-box" placeholder="Search...">
            <input type="submit" class="search-submit">
        </form>
    </div>

    </body>
    </html>

＆＃13;

Use this code

Answer 4

只有在展开.search-box时才能添加填充权：

.expanded-search-box {
  width: 350px;
  padding-right: 150px;
}

另一个解决方案是不要让提交按钮与输入重叠：

＆＃13;

/* Reset the box-sizing */

html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

/* Search group */

.search-group {
    width: 100%;
    max-width: 200px;
    overflow: hidden;
    margin-bottom: 1em;
}

.search-group--expanded {
    max-width: 500px;
}

/* Search input */

.search-input {
    float: left;
    width: 75%;
    padding: .5em 1em;
}

/* Search button */

.search-button {
    float: right;
    width: 25%;
    padding: .5em 1em;
    border: none;
}

＆＃13;

<div class="search-group">
    <input class="search-input" type="text" placeholder="Search for...">
    <button class="search-button" type="button">Submit</button>
</div>


<div class="search-group--expanded">
    <input class="search-input" type="text" placeholder="Search for...">
    <input class="search-button" type="submit" value="Submit">
</div>

＆＃13;

Answer 5

请使用此代码。我为你创造了一个jsfiddle。

<div class="form-container">
    <form action="" class="form">
        <input type="text" name="search" class="search-box" placeholder="Search...">
        <input type="submit" class="search-submit">
    </form>
</div>

 $('.search-submit').click(function (e) {
        e.preventDefault();

        var searchbox = $('.search-box');

        if(searchbox.hasClass('expanded-search-box'))
        {
            // close the form
            searchbox.removeClass('expanded-search-box');
            searchbox.removeClass('dynamic-margin');
        }

        else {
            // open the form
            searchbox.addClass('expanded-search-box');
             searchbox.addClass('dynamic-margin');
        }

    });

.form-container{
            width: 600px;
            margin: 0 auto;
            border: 1px solid #000;
            padding: 33px 14px;
        }

        .form-container:after{
            content: '';
            display: block;
            clear: both;
        }

        form{
            position: relative;
            float: right;
        }

        .search-box{
            top: 0;
            right: 0;
            width: 90px;

            transition: width 0.3s ease-out;
            padding: 10px 0px;
            padding-left: 10px;
            outline: none;
        }

        .search-submit{
            position: absolute;
            width: 110px;
            top: 0;
            right: 0;
            padding: 10px 0px;
        }

        .expanded-search-box{
            width: 400px;
        }
        .dynamic-margin{margin-right:100px;}

https://jsfiddle.net/satyaprasanna/8x99tq0h/7/

由于萨蒂亚

Answer 6

替换您的css类

.expanded-search-box {
    width: 395px;
    padding: 10px;
}
.search-box {
    top: 0;
    right: 0;
    width: 0px;
    transition: width 0.3s ease-out;
    padding: 10px 0px;
    outline: none;
    margin-right: 105px;
}

CSS - 输入足够的字符时扩展搜索栏问题

6 个答案: