javascript - Placing static text at the end of an input field using HTML - Stack Overflow

admin管理员组

文章数量:1290960

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "@gmail" at the end of an input element field using HTML and CSS. My question is how could this be acplished? I got the idea from the bootstrap validation states icons.

For example the input field would look like..

I hope this makes sense.. If you have any questions feel free to ask.

This text should stay static as the user types, which is what seperates it from a input field.

Here's some code that I have:

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

My 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";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

JSFiddle: /

What I'm trying to do is place a static piece of text at the end of a input field. Not a placeholder, the idea is to have something like "@gmail." at the end of an input element field using HTML and CSS. My question is how could this be acplished? I got the idea from the bootstrap validation states icons.

For example the input field would look like..

I hope this makes sense.. If you have any questions feel free to ask.

This text should stay static as the user types, which is what seperates it from a input field.

Here's some code that I have:

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

My 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.";
    background-color:yellow;
    color:red;
    font-weight:bold;
}

JSFiddle: http://jsfiddle/UMBRd/

• javascript
• html
• css
• twitter-bootstrap

Share Improve this question Follow edited Apr 8, 2014 at 15:55 ryandawkins asked Apr 8, 2014 at 15:46 ryandawkinsryandawkins 1,54555 gold badges2626 silver badges3838 bronze badges 2

• 3 What about some CSS trickery? Use a :before with content: '@gmail.' – luk3thomas Commented Apr 8, 2014 at 15:49
• @luk3thomas that CSS didn't seem to work :\ Here's my jsfiddle: jsfiddle/UMBRd – ryandawkins Commented Apr 8, 2014 at 15:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

Here's some stuff to get you going, essentially you'll need to wrap the input in a div and adjust it's width to be the same as the input's (I did this by floating the div, but there are other ways). This will give you a coordinate system to place a pseudo-element in with your desired text.

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.';
}

See this fiddle.

Note, the pure CSS way with pseudo-elements won't work as discussed in this post.

The only thing I can think of would be to use absolute and relative positioning to overlay the input on top of the span. It's not perfect and I had to play around with the line-height a bit, but this might be enough to get you started:

HTML

<div>
    <span>@gmail.</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/pemep/

本文标签： javascriptPlacing static text at the end of an input field using HTMLStack Overflow