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

【问题标题】：text in the input field which cannot be deleted输入字段中无法删除的文本
【发布时间】：2022-05-04 22:17:34
【问题描述】：

我有一个输入字段，例如

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

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

【问题讨论】：

想不出这是否可能：D
然后用户可以在静态文本后面写一些东西，但还是可以删除的。
您可以使用左填充输入字段和带有静态内容文本的背景图像

标签： javascript jquery html css

【解决方案1】：

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

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

将您的input[type=text] 放入label 并提供一些ID，就像我在这里给出的#txt 一样，并在css 中做一些样式如下：

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

A demo for you.

【讨论】：

【解决方案2】：

您可以使用包裹在div 中的两个input 标签（其中一个禁用，充当“静态”文本），类似于：

<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

【讨论】：

【解决方案3】：

Mind 和 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

【讨论】：

【解决方案4】：

您应该使用两个输入框，使一个禁用并保持另一个可编辑并根据要求应用 css。

【讨论】：

【解决方案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来转换上面的逻辑，这样会更简单易读。

【讨论】：

【解决方案6】：

JSFiddle

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

【讨论】：

【解决方案7】：

几年后的一条消息...就我而言，我的页面上有一个名为“source”的字段。我得到字符数（XX.value.length），然后比较这个值是否小于或等于 selectionStart。如果此人将光标放在不要删除的元素上，我将取消该操作。在示例中，如果用户将光标放在 1 和 2 之间，则无法删除。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        function ValidateInput(ctrl) {
                var value = document.getElementById("Source").value;
            
            if (event.keyCode!= 37 && event.keyCode != 39) {
                if (ctrl.selectionStart < value.length) return false;
            }
            
            if (event.keyCode == 8 || event.keyCode == 46) {
                if (ctrl.selectionStart <= value.length) return false;
            }
            
            return true;
            
        }
    </script>
</head>
<body>
    <input type="text" id="Name" name="Name" value="1234" onkeydown="return ValidateInput(this);"/>
    <input type="text" id="Source" name="Source" value="1234" disabled/>
</body>
</html>

【讨论】：