HTML TextBox 数字后面的永久文本

Question

我想为单位度量创建一个文本框。例如“1 公斤”。我知道可以将文本包装在文本框后面，但我希望该单元位于文本框本身内。虽然可以更改数字，但它后面的单位应该保留在文本框本身的末尾。有办法吗？可能使用 CSS?

谢谢！

Answer 1

试试这个：

  <span contenteditable name="kgData" style='border: thin solid #000;'> Enter Value </span>
  <span contenteditable=false> Kg</span>

提交后，获取kgData，然后你就可以在其他页面访问该数据/将其保存在db中。看看，是否有帮助。

Answer 2

将您的输入包裹在 div 中，将您的单位作为子元素添加到 div 并将其放置在文本框上方。

JSBIN：http://jsbin.com/mayurexoyi/1/edit?html,css,output

HTML

  <div class="input_wrapper">
    <input type="text" value="20" />
    <div class="unit">KG</div>
  </div>

CSS

input {
  font-size:14px;
  padding:10px 25px 10px 10px;
  border:1px solid #CCC;
}

.input_wrapper {
  float:left;
  position:relative;  
}

.input_wrapper .unit {
  position:absolute;
  right:10px;
  top: 14px;
  color:#999;
}

Answer 3

我想这会对你有所帮助。

HTML :

<div>

    <input type="text" />
    <label>kg</label>
</div>

CSS :

div{
  border:1px solid gray;
  width: 180px;
}
label{
font-family:arial;
 font-size:.8em;
}
input{
  border:none;
}
input:focus{
outline:none;
}

查看 fiddle

HTML TextBox 数字后面的永久文本

HTML TextBox permanent text behind number

html

css

textbox

styling