5

テキストボックスにデフォルトのテキストを表示して読み取り専用にしようとしています。

ユーザーは、その読み取り専用テキストの後にテキストを追加できます。

JSとhtmlやcssで可能ですか??

ここに画像の説明を入力

テキスト READONLY は読み取り専用になり、ユーザーは変更できません。ただし、ユーザーはその後にテキストを追加できます。出来ますか。テキストを掲載したい。だから私は label.i を使用しません 2 に分割できます。しかし、私はただ興味があります!!

4

4 に答える 4

2

真の検証はバックエンドで行う必要がありますが、テキスト ボックスの value 属性に値を割り当てることができます。読み込みdefaultValue時に、DOM 内の要素のプロパティが設定されます。次に、キーアップ イベントごとに、テキストの値を元の値と比較し、必要に応じて変更します。

値の途中にテキストを挿入すると、一致しない部分が挿入され、残りの値が維持されることに注意してください。これは、長い文字列を貼り付けてテキストを失いたくない場合に便利です。

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 / ラベルの配置を使用することです。

于 2013-08-14T03:45:12.143 に答える
1 
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();

jsフィドル

このコードでは、CSS スタイル、入力値およびイベント ハンドラーでのテキストの間隔を使用します。マウス選択の完全な処理関数は作成していません。現在、ユーザーは空白を選択して削除できます (または、文字列が入力されている場合はバックスペースを使用することもできます)。ただし、キーが押された場合は 20 個のスペースを挿入します。長さは < 20 です。

矢印キーを押すと、カーソルの位置が計算され、それに基づいて移動するかどうかが決まります (単純な preventDefault)。ENTER を押すと、スペースを埋めずに値が表示されます。

重複する div の良い点は、さまざまなテキストの色、背景など (div スタイル) を使用できることです。必要なのは、空白の量を設定して、div が入力内にあるように見せることだけです。 .

もちろん、これはクロスブラウザーではありません。すべての宣言チェックとイベント処理チェックを自分で行う必要がありますが、基本的にはそれがあなたが望んでいたことだと思いますよね?

于 2013-08-14T02:10:17.783 に答える
0

ちょうど私がホイップしたもの。それが役に立てば幸い

 <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;"/>
于 2013-08-14T00:15:24.720 に答える