Question

如何将默认文本放在用户无法删除的输入html元素中（输入开头的文本文本）。第二件事我想要光标将在此固定文本之后编入索引。

Answer 1

试试这个可能对你有帮助。

<div class="input-box">
  <input value="" autofocus="autofocus"/>
  <span class="unit">£</span>
</div>

Answer 2

我知道这个问题已经得到解答，但这是另一种方法。

<!DOCTYPE html>
<html>
<head>
    <style>
    #text_container
    {
        padding: 1px;           /*To make sure that the input and the label will not overlap the border, If you remove this line it will not display correctly on Opera 15.0*/
        border: 1px solid activeborder; /*Create our fake border :D*/
    }
    #text_container > label
    {
        color: activeborder;
        background-color: white;    

        -webkit-touch-callout: none;    /*Make the label text unselectable*/
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
    }
    #text_container > input
    {
        border: none;           /*We have our fake border already :D*/
    }
    </style>
</head>

<body>
    <span id="text_container">
    <!-- Don't break the following line to avoid any gaps between the label text and the input text -->
    <label>http://www.</label><input type="text" />
    </span>
</body>
</html>

我用..

测试了这段代码

Firefox 22
Google Chrome 28
Internet Explorer 10
Safari 5
Opera 15

Answer 3

如果您只想使用输入元素来修复此问题，则可以使用内联svg背景。

http://codepen.io/anon/pen/pJoBya

HTML

<input type="text" />

CSS

input {
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="40" height="30"><text x="5" y="19" style="font: bold 16px Arial;">Age:</text></svg>') no-repeat;
  border: 1px solid #555;
  box-sizing: border-box;
  font: 16px "Arial";
  height: 30px;
  padding-left: 50px;
  width: 300px;
}

要在Internet Explorer中使用此功能，您需要encodeURIComponent SVG图像 http://pressbin.com/tools/urlencode_urldecode/

Answer 4

将文本完全放在字段的开头，然后将左边距添加到字段，直到光标向上排到正确的位置。见这里的例子： http://www.accessfinancialservices.co.uk/calculators/mortgage-calculator/

Answer 5

var requiredText = 'http://';
    $('#site').on('input',function() {
        if (String($(this).val()).indexOf(requiredText) == -1) {
            $(this).val(requiredText);
        }
    });

Answer 6

您也可以使用bootstrap来做到这一点：

div class="input-group">
        <div class="input-group-prepend">
          <div class="input-group-text">@</div>
        </div>
        <input type="text" class="form-control" id="inlineFormInputGroupUsername" placeholder="Username">
</div>

您可以选中here。（选中用户名字段）

Answer 7

只需使用占位符=＆＃34;名称＆＃34; 例如：

Html在输入文本上放置固定文本

7 个答案: