javascript - 与静态内容重叠的输入标签

Question

我在 html 中有两个重叠的输入标签。我希望其中一个应该有 $ 符号，而另一个应该有 Value 作为占位符。现在，当它们重叠时，我希望当用户按下 tab 键并到达重叠的输入框时，它应该选择 Value 作为占位符的输入框。通过这个我想实现 $ sin 应该是静态的。

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

Answer 1

没有必要使用输入标签来保持 $ 符号。使用 Bootstrap 将 $ 添加到输入框:

这是一个用法示例:

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

这是 Bootstrap 文档的链接: http://getbootstrap.com/components/#input-groups