是否可以使文本框的一部分只读？ [英] is it possible to make part of text box read only?

问题描述

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

I am trying to show a default text in textbox and make it readonly.

用户可以在该唯读文本后添加文字。

user will be able to add text after that readonly text.

可以通过JS和html或css？

Is it possible by JS and html or css ??

文本READONLY将是只读的，不能由用户更改。但用户可以添加一些文本。可能吗。我wanto张贴的文字。所以我不去与label.i可以拆分成2。但我只是好奇！

The text READONLY will be readonly and cannot be changed by user. But user can add some text after that . is it possible. I wanto post the text. so i am not going with label.i can split it into 2 . but i am just curious!!

推荐答案

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。

This code uses the CSS styling, some text spacing in the input value and event handlers. I didn't write a full handling function for mouse selection, which currently lets the user select the white spaces and delete it (or even backspace it, if there is a string typed), but will insert the 20 spaces if any key is pressed and the length is < 20.

当你按箭头键，它会计算光标的位置，并基于此，让你移动或不移动（只是简单preventDefault）。

When you press the arrow keys, it will calculate where the cursor is, and based on that, let you move it or not (just simple preventDefault). And on ENTER, will display the value without the filling spaces.

重叠div的好处在于你可以使用不同的文字颜色，背景等等（div style） ）....所有你需要做的是设置空白的amout以使它看起来div是在输入内。

The good thing about the overlapping div is that you can use different text colors, backgrounds, etc (div styling).... All you need to do is set the amout of white spaces to make it appear that the div is inside the input.

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

Of course this is not cross-browser, you'll have to do all the declaration checks and event handling checks on your own, but I think that's basically what you wanted, right?

这篇关于是否可以使文本框的一部分只读？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！