Question

我有一个输入字段，例如

<input type="text" value="static text">
</input>

是否有可能无法删除或选择static text？这是必需的，以便用户可以在“静态文本”之后输入文本。

Answer 1

我建议你这样做（只是HTML＆amp; CSS解决方案）：

<label for='txt'>static text
   <input type="text" id='txt' value=""/>
</label>

将input[type=text]放在label中，并在此处给出#txt给出的一些ID，并在css中做一些样式，如下所示：

#txt {
   border:none;
   outline:none;
}
label[for="txt"] {
   border:solid 1px #d5d5d5;
   padding: 0 0 0 5px;
}

A demo for you.

Answer 2

您可以使用两个input标记（其中一个禁用，作为“静态”文本）包含在div中，类似于：

<div id="wrapper">
    <input type="text" id="static" value="fixed" disabled>
    <input type="text" id="user">
</div>

（您也可以使用readonly属性代替disabled属性）

然后你可以设置标签的样式，使它们看起来像你想要的那样。

#wrapper {
    border: 1px solid black;
    display:inline-block
}
#static {
    width:30px;
    background: white; // not required if you 
    color: black;      //   use readonly
}
input {
    border: none;
    outline: 0 none;
}

DEMO

编辑：使用Javascript阻止用户选择静态文本：

document.getElementById('static').onselect = function (event) {
    event.target.selectionStart = event.target.selectionEnd;
}

DEMO

Answer 3

心灵和Jai有点相同，我只使用一个标签，而不仅仅是个人的偏见。

<span class="static_text">Static text </span>
<input type="text" placeholder="your text here..." />

然后将其设置为使其看起来像一个框：

input {
    display: block;
    margin: -1px 0 0 -1px;
    border: solid 1px #000;
    border-left: none;
    outline: none;
    height: 18px;
}

.static_text {
    padding: 0 5px;
    border: solid 1px #000;
    border-right: none;
    float: left;
}

<强> DEMO

Answer 4

您应该使用两个输入框，进行一次禁用并保持其他可编辑状态并根据要求应用css。

Answer 5

您可以使用javascript的keydown事件允许用户在文本框中键入其他文本，但阻止他们删除固定文本。以下是一个例子。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function ValidateInput(ctrl) {
            if (event.keyCode == 8 ||event.keyCode == 46) {   //backspace pressed or delete key pressed
                //check whether the user is trying to delete the fixed text
                if (ctrl.selectionStart <= 4) return false;
            }

            return true;
        }
    </script>
</head>
<body>
    <input type="text" id="Name" name="Name" value="1234" onkeydown="return ValidateInput(this);"/>
</body>
</html>

您还可以使用jquery转换上述逻辑，这将更简单，更易读。

Answer 6

JSFiddle

#txt {
    border:none;
    outline:none;
}
label[for="txt"] {
    border:solid 1px #d5d5d5;
    padding: 0 0 0 5px;
}

输入字段中的文本无法删除

6 个答案:

A demo for you.