HTML
<div ng-app="">
<h1>Half disabled input</h1>
<div id="form">
<input type="text" placeholder="Email" value="shukla304@gmail.com" class="email">
<div id="url">
<input id="username" type="text" value="" placeholder="TypehereUsername">
<span>shukla304.com/</span>
</div>
<button>Continue</button>
</div>
</div>
CSS
* {
box-sizing: Border-box;
}
html, body {
background-color: #C6E8DA;
margin: 20px auto;
display: block;
max-width: 600px;
height: 100%;
text-align: center;
}
body {
padding: 20px;
position: relative;
}
h2, a, p, *:before,h1, span, input {
font-family: "Helvetica Neue", sans-serif;
font-weight: 300;
}
h1 {
color: #35A0FD;
margin-bottom: 1.5em;
}
h2 {
color: #35A0FD;
margin-bottom: 1em;
margin-top: 0;
font-size: 20px;
background-color: white;
/*width: 100px;*/
text-align: center;
padding: 16px;
z-index: 15;
border-radius: 4px;
transition: all 2s ease-out;
}
p {
display: block;
width: 100%;
color: #2c3e50;
clear: both;
}
.description {
margin-bottom: 70px;
}
button {
border: 0;
background-color: #35A0FD;
color: white;
border-radius: 4px;
padding: 0.7em 1.5em;
font-size: 1em;
transition: background-color 0.2s ease-out;
margin: 0;
cursor: pointer;
}
button:hover {
background-color: #2980b9;
}
button:active, button:hover {
outline: none;
}
.wrapper {
border: 1px dashed #95a5a6;
height: 56px;
margin-top: 16px;
border-radius: 4px;
position: relative;
font-size: 12px;
}
.wrapper p {
line-height: 31px;
}
#form {
width: 300px;
margin: 0 auto;
}
input {
border: 1px solid #CCC;
font-size: 1em;
height: 40px;
border-radius: 4px;
width: 100%;
transition: border 0.2s ease-out;
padding: 0 0.75em;
display: block;
margin: 0 auto 0.5em;
-webkit-appearance: none;
}
span {
font-size: 1em;
}
input:hover {
border: 1px solid #9B9B9B;
}
input:focus {
outline: none;
}
#url {
position: relative;
width: 100%;
}
#url span {
position: absolute;
left: 1em;
top: 0;
height: 100%;
line-height: 40px;
color: rgba(0, 0, 0, 0.3);
user-select: none;
}
#username {
text-indent: 120px;
margin-bottom: 1em;
}
::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.3);
}
:-moz-placeholder { /* Firefox 18- */
color: rgba(0, 0, 0, 0.3);
}
::-moz-placeholder { /* Firefox 19+ */
color: rgba(0, 0, 0, 0.3);
}
:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.3);
}
JAVASCRIPT
$('.email').keyup(function(){
var theName = $(this).val();
var userName = (theName.split('@')[0]);
$( "#username" ).val(userName);
});
var width = $("#url span").width();
$("#username").css("text-indent", width + 3 );
