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

时间:2014-04-08 15:46:23

标签: javascript html css twitter-bootstrap

我要做的是在输入字段的末尾放置一段静态文本。不是占位符,我们的想法是使用HTML和CSS在输入元素字段的末尾添加类似“@ gmail.com”的内容。我的问题是如何实现这一目标?我从引导程序validation states icons.

中得到了这个想法

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

enter image description here

我希望这是有道理的。如果您有任何问题可以随意提问。

这个文本应该在用户输入时保持静态,这是从输入字段中分离出来的。

以下是我的一些代码:

<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/

2 个答案:

答案 0 :(得分:3)

这里有一些让你前进的东西,基本上你需要将输入包装在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中讨论的那样工作。

答案 1 :(得分:0)

我唯一能想到的就是使用absoluterelative定位来覆盖input顶部的span。它并不完美,我不得不稍微使用线高,但这可能足以让你开始:

HTML

<div>
    <span>@gmail.com</span>
    <input type="text" />
</div>

CSS

div {
    position: relative;
}
span {
    display: inline-block;
    width: 200px;
    position: relative;
    line-height:95px;
    text-align:right;
}
input {
    position: absolute;
    left: 10px;
    top: 35px;
    background-color: transparent;
    width:200px;
    height: 20px;
}

http://jsfiddle.net/pemep/