javascript - 是否可以将部分文本框设为只读？

Question

我正在尝试在文本框中显示默认文本并将其设为只读。

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

JS和html或css可以吗？

文本 READONLY 将是只读的，用户不能更改。但是用户可以在那之后添加一些文本。可能吗。我想发布文本。所以我不使用标签。我可以将它分成 2 。但我只是好奇！

Answer 1

将文本移动到文本框之前的普通 ( <label for>) 元素并添加 CSS 样式以使其看起来像在框内。

Answer 2

任何真正的验证都应该在后端完成，但您可以为文本框的 value 属性分配一个值。在加载时，这将设置defaultValueDOM 中元素的属性。然后，在每个 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 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;"/>