如何在没有Bootstrap的单个输入中显示隐藏/显示按钮

Question

我正在努力做到以下几点：

我的网页目前看起来像这样：

如何在输入字段中放置隐藏/显示和生成链接。没有使用bootstrap，任何帮助将非常感激。

以下代码：

<script  type="text/javascript" >
                    var pwdwidget = new PasswordWidget('thepwddiv','pass1');
                    pwdwidget.MakePWDWidget();
                </script>
                <noscript>
                <div>  <input type="password" id="pass1" name="password" value="" placeholder="Password" required <?php $reg_errors ?>/></div>
                </noscript>   

.container{
    padding: 0 auto;
    width: 450px;
    margin: 180px 35% 0% 35%;
}

input[type=email]{
    font-family: AmsiPro-XLight;
    background-color:#FFF;
    /*    border: 1px dotted #999;*/
    float: right;
    /*    margin: 2em 35% 0% 35%;*/
    padding: 18px 20px;
    width: 400px;
    /*    background-clip: padding-box;*/
    border: 1px solid #FFF;
    border-bottom-color: #FFF;
    border-radius: 5px;

}

input[type=password]{
    font-family: AmsiPro-XLight;
    background-color:#FFF;
    /*    border: 1px dotted #999;*/
    float:right;
    /*    margin: 10px 35% 0% 35%;*/
    padding: 18px 20px;
    width: 400px;
    /*    background-clip: padding-box;*/
    border: 1px solid #FFF;
    border-bottom-color: #FFF;
    border-radius: 5px;

}

input[type=submit]{
    font-family: AmsiProNarw-Regular;
    text-align: center;
    background-color:#d5e16d;
    float: right;
    margin: 10px 0% 0% 5%;
    padding: 18px 20px;
    width: 100px;
    height: 50px;
    /*    background-clip: padding-box;*/
    border: 2px solid #a5a953;
    /*    border-bottom-color: #142647;*/
    border-radius: 8px;

}

/* Show button */

input[type=button]{
    font-family: AmsiProNarw-Regular;
    /*    text-align: center;*/
    /*    background-color:#FFF;*/
    float: right;
    /*    margin: 10px 0% 0% 5%;
        padding: 18px 20px;
        width: 50px;
        height: 50px;
            background-clip: padding-box;
        border: 2px solid #a5a953;
        border-bottom-color: #142647;
        border-radius: 8px;*/
    /*      content:"\e105";*/
    font-family: 'Glyphicons Halflings'; 
    content:"\e105";
}

title {
    display: none;
}

/*.pwdwidgetdiv
{
	width:155px;
}
.pwdfield
{
	width:150px;
}
*/.pwdopsdiv{
	display: block;
	float: left;
	margin-left:2%;
        color: #000;      
}

.pwdopsdiv a
{
	font-family : AmsiProNarw-Regular;;
	font-size : 1em; 
        text-decoration: none;
}

/*Hide/Show password meter*/
.pwdstrengthbar{
    float:right;
    background:#e86065;
    height:10px;
    margin-top:-10px;
}

.pwdstrength{
    float:right; 
    height:20px;
    width:300px;
    margin-top:15px;
}

/*Password strength meter text*/
.pwdstrengthstr{
    float:right;
    clear:both;
    height:14px;
    margin-top:-20px;
    font-family : AmsiProNarw-Regular;
    font-size : 0.8em; 
}

<section class="container">
            <form class="Form" method="post" action="reg_1.php" accept-charset="utf-8">

                <!--                    <div id="first">-->
                <input type="email" id="email" name="email" placeholder="Email Address" value=''>
                <br>
                <!-- Hide/Show generate password -->

              <div class='pwdwidgetdiv' id='thepwddiv'></div>
              <input type="password" id="pass2" name="password2" value="" placeholder=" Confirm password" required <?php $reg_errors ?>

                       <p class="remember_me">
                </p>
                <p class="submit"><input type="submit" name="submit" value="Register"></p>
                <br>
                </form>
        </section>

Answer 1

点击更改文字？只需使用文本执行If / Else：

$('.showhide').click(function (e) {
    e.preventDefault();
        $('.show').text(function (i, v) {
            return $this.is(':hidden') ? 'HIDE' : 'SHOW'
        })
    });
});

如果你想定义和添加一个按钮或只是文本你就可以这样（复杂）：

SHOW PASSWORD