JavaScript-使用HTML在输入字段的末尾放置静态文本

我想做的是在输入字段的末尾放置一段静态文本.这不是占位符,而是使用HTML和CSS在输入元素字段的末尾添加类似“ @ gmail.com”的内容.我的问题是如何做到这一点？我从Bootstrap validation states icons.得到了这个主意

例如,输入字段看起来像..

我希望这是有道理的.如果您有任何问题,请随时提出.

用户输入时,该文本应保持静态,这是将其与输入字段区分开的原因.

这是我的一些代码：

<form id="loginForm">
    <fieldset>
        <legend>Login</legend>
        <div class="form-group">
            <input id="usernameField" class="loginField form-control" name="username" type="text" placeholder="john.doe" required>
        </div>
        <br>
        <div class="form-group">
            <input id="passwordField" class="loginField form-control" name="password" type="password" placeholder="password" required>
        </div>
        <br>
        <span class="visible-lg">
            <button class="btn btn-danger loginBtn"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
        </span>
        <span class="hidden-lg">
            <button class="btn btn-danger loginBtn btn-large"><i class="fa fa-signin"></i> Login <i class="fa fa-spinner icon-spin icon-white loginSpinner"></i></button>
        </span>
        <br>
    </fieldset>
</form>

我的CSS：

.loginSpinner{
    display: none !important;
}

#badLogin{
    display: none;
}

#badRequest{
    display: none;
}

#createAccountForm{
    display: none;
}

.createSpinner{
    display: none !important;
}

#forgotPassword{
    display: none;
    color: red;
}

#usernameField:before{
    content:"@gmail.com";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

JSFiddle：http://jsfiddle.net/UMBRd/

解决方法:

这是一些让您开始的事情,基本上,您需要将输入包装在div中并调整其宽度,使其与输入的宽度相同(我通过浮动div来做到这一点,但是还有其他方法).这将为您提供一个坐标系统,以在其中放置所需元素的伪元素.

的HTML

<div class="input-container">
    <input type="text"/>
</div>

的CSS

.input-container {
    position: relative;
    float: left;
}

.input-container:after {
    position: absolute;
    right: 0;
    top: 0;
    content: '@gmail.com';
}

参见this fiddle.

请注意,带有伪元素的纯CSS方式将无法工作,如this post所述.

标签：twitter-bootstrap,css,html,javascript
来源： https://codeday.me/bug/20191121/2055152.html