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

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

javascript jquery html css

Javascript 输入字段中无法删除的文本,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个输入字段，例如 <input type="text" value="static text"> </input> 是否可能无法删除或选择静态文本？这是必需的，以便用户可以在“静态文本”之后输入文本。我建议您这样做（只是HTML和CSS解决方案）：您可以在div中使用两个input标记（其中一个被禁用，用作“静态”文本），类似于： <div id="wrapper"> <input type="text" id="static" v

我有一个输入字段，例如

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

是否可能无法删除或选择

静态文本

？这是必需的，以便用户可以在“静态文本”之后输入文本。

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

您可以在

div

中使用两个

input

标记（其中一个被禁用，用作“静态”文本），类似于：

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

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

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

思维和Jai有点一样，我只是使用了一个标签，只是个人的预引用

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

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

您可以使用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>


函数ValidateInput（ctrl）{
如果（event.keyCode==8 | | event.keyCode==46）{//按backspace键或delete键
//检查用户是否正在尝试删除固定文本
如果（ctrl.selectionStart
我想这是不可能的：D然后用户可以在静态文本后写一些东西，但仍然可以删除。您可以使用左填充输入字段和带有静态内容文本的背景图像
document.getElementById('static').onselect = function (event) {
    event.target.selectionStart = event.target.selectionEnd;
}

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

<!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>

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