是否可以将文本框的一部分设为只读？

Question

我试图在文本框中显示默认文本并使其只读。

用户将能够在该只读文本之后添加文本。

它是否可能由JS和HTML或CSS？

文本READONLY将是只读的，用户无法更改。 但是之后用户可以添加一些文本。 可能吗。 我想发帖子。 所以我不会使用label.i可以将其拆分为2。 但我只是好奇！

Answer 1

任何真正的验证都应该在后端完成，但是您可以为文本框的value属性赋值。 在加载时，这将设置DOM中元素的defaultValue属性。 然后，在每个keyup事件中，将文本的值与其原始值进行比较，并根据需要进行修改。

如果在文本的中间插入文本，请注意它是如何插入不匹配的部分并保留其余值的。 如果您粘贴一个长字符串并且不想丢失文本，这可能很有用。

http://jsfiddle.net/vol7ron/HdpPp/

var $text = $('#text');

$text.on('keyup',function(){
    // Cache some lookups
    var $this    = $(this);
    var _val     = $this.val();           
    var _dv      = $this.prop('defaultValue');
    var _len     = _dv.length;
    var _tmp     = _val.substring( 0, Math.min( $this.val().length, _len ) );
    var mismatch = { found:false, position:0 };

    // Look for character position where two strings differ
    for(var i=0,n=_tmp.length;i<n;i++)
        if ( _tmp[i] != _dv[i] ) {      // compare two characters; true=difference found
            mismatch.found = true;      // set the boolean
            mismatch.position = i;      // store the position
            break;                      // stop looking
        }

    // Original string exists, but with end characters missing
    if ( !mismatch.found && _tmp.length < _len )
        mismatch.position = _len - ( _len - _tmp.length );

    // Insert original string before the mismatch position
    if (mismatch.found || mismatch.position) {
        _val = _val.split('');
        _val.splice( mismatch.position, 0, _dv.substring(mismatch.position) );
        _val = _val.join('');
        $this.val(_val);
    }
});

---

实现这一点的最简单方法是使用CSS /标签定位，正如其他人已经建议的那样。

Answer 2

将文本移动到文本框之前的正常（ <label for> ）元素，并添加CSS样式以使其看起来像在框内。

Answer 3

var InputMask = {
init: function () {
    var divMask = document.getElementById("readonly");
    var inputField = document.getElementById("myInput");

    InputMask._input = inputField;
    InputMask._pos = 0;
    // resets the form
    inputField.value = "";

    divMask.addEventListener('click', InputMask.focusHandler, false );
    inputField.addEventListener('focus', InputMask.focusHandler, false );
    inputField.addEventListener('keydown', InputMask.keyInput, false );

},

focusHandler: function(event){
    InputMask._input.focus();

    var backup = InputMask._input.value.substr(20) || "";

    InputMask._input.value="                    " + backup;
},

keyInput: function ( event ) {
    var length_invalid = (InputMask._input.value.length == 20 ) ? true : false;
    var realString = InputMask._input.value.substr(20);
    var realLength = realString.length;

    // fix to mouse selection delete
    if ( InputMask._input.value.length < 20 ) {
        InputMask._input.value="                    ";
    }

    // backspace code = 8
    if (event.keyCode == 8 && length_invalid ) event.preventDefault();

    // left arrow key = 37
    if ( event.keyCode == 37 && (realLength + InputMask._pos) == 0 ) {
        event.preventDefault();
    } else if (event.keyCode == 37 && ( InputMask._pos >= (0 - realLength))) {
        InputMask._pos--;
    }

    // right arrow key = 39
    if ( event.keyCode == 39 && InputMask._pos < 0) InputMask._pos++;        

    // enter = 13
    if ( event.keyCode == 13) {
        alert ( "Input Value: ["+ InputMask._input.value.substr(20) +"]");

        // reset
        InputMask.reset();
    }
},
reset: function(){
    var field = InputMask._input;

    field.value = "";
    field.blur();
}
};

InputMask.init();

的jsfiddle

此代码使用CSS样式，输入值和事件处理程序中的一些文本间距。 我没有为鼠标选择编写一个完整的处理函数，目前让用户选择空格并将其删除（如果键入了字符串，则甚至退格），但如果按任何键则会插入20个空格长度<20。

当你按下箭头键时，它将计算光标的位置，并根据它，让你移动它（只是简单的preventDefault）。 在ENTER上，将显示没有填充空格的值。

关于重叠div的好处是你可以使用不同的文本颜色，背景等（div样式）....你需要做的就是设置白色空间的大小使得看起来div在输入里面。

当然这不是跨浏览器，你必须自己做所有的声明检查和事件处理检查，但我认为这基本上是你想要的，对吧？

Answer 4

只是有些事我鞭打了。 希望能帮助到你

 <div style="position:absolute; z-index:1; top:1px; width:270px; border:2px; border:1px 
 solid black;">type here:</div>

 <input style="position:absolute; z-index:2; top:1px; width:200px; left:70px; border:0px   
 solid black;"/>