CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Abhinav Pandey
Abhinav Pandey

Reputation: 270

overlapping input tag with static content

I have two overlapping input tags in html. i want that one should have $ sign in it and other should have Value as placeholder in it. Now when they are overlapping I want that when a user presses tab key and reaches the overlapping input boxes it should select the one with Value as is placeholder. By this I want to achieve that $ sin should be static. 

<div id="twoinput" style="width: 40%; float: right;">                    
    <input id="visiblevalue" type="text" name="value" placeholder="$ Value" value="" required="required" onfocus="if(this.value == '') this.value='$ '" onblur="if(this.value == '$ ') this.value = ''" onkeydown="return isNumber(event);"  />
    <input id=hiddenvalue type="text" placeholder="Value" value="" required="required" onfocus="this.placeholder=''" onblur="if(this.value=='')this.placeholder='Value'" />
</div>
#twoinput{
    position:relative;
}
#visiblevalue{
    position:absolute;
}
#hiddenvalue{
    bottom: 0; 
    right:0;
    left:0;
}
#twoinput{
    position:relative;
}
#visiblevalue{
    position:absolute;
}
#hiddenvalue{
    bottom: 0; 
    right:0;
    left:0;
}

Upvotes: 0

Views: 325

Answers (1)

VerySeriousSoftwareEndeavours
VerySeriousSoftwareEndeavours

Reputation: 1753

There is no need to use an input tag just to hold the $ sign. Use Bootstrap to prepend the $ to the input box:

Here is an example of usage:

<div class="input-group">
  <span class="input-group-addon">$</span>
  <input type="text" class="form-control">
</div>

Here is a link to the Bootstrap Documentation: http://getbootstrap.com/components/#input-groups

Upvotes: 2

Related Questions