如何分两部分进行输入.一个不可编辑，另一个类似于标准输入

Question

我想在文本框中双向显示。第一个显示无法擦除的值(只读(。另一个将作为输入标准。

输入在剑道网格中，我只能使用一个输入。

是否可以在屏蔽文本框一侧找到解决方案？正则表达式

请帮忙！

Answer 1

查看此解决方案是否有效并解决您的问题

html

<div id = "textbox" contenteditable></div>

css

    * {
    padding:none;
    margin:none;
    box-shadow:none;
    text-shadow:none;
}
div{
    outline:none;
}
#textbox{
    width:100px;
    height:20px;
    background:lightblue;
    border-left:none;
    position:relative;
    -webkit-transform:translate(100%);
}
#textbox:before{
    content:"Not Editable";
    width:100px;
    height:20px;
    background:lightblue;
    border-right:none;
    position:absolute;
    left:-100px;
}

演示

希望这能有所帮助。我没有使用input框，而是使用了contenteditable div。

Answer 2

请在文本框中使用只读属性，如下所示：(电子邮件：input type="text"name="Email"国家：输入type="text"name="Country"value="Norway"只读

请使用角制动器

Answer 3

2个备选方案；

第一；并排使用两个文本框，一个只读，另一个正常。

第二；将keylisteners添加到字段中，并使用您的第一个readOnly部分和用户条目进行连接。然后将其设置为textfield。(肮脏的解决方法：(