javascript - テキスト ボックス内の一部のテキストのみを読み取り専用にし、残りのテキストを編集できるようにする方法

Question

Javascript を使用して、テキスト ボックスの先頭に読み取り専用テキストを含むテキスト ボックスを作成し、読み取り専用テキストに続いて編集できるようにしようとしています。Javascript/jqueryでこれを行うにはどうすればよいですか?

Answer 1

ここに試みがあります：

var readOnlyLength = $('#field').val().length;

$('#output').text(readOnlyLength);

$('#field').on('keypress, keydown', function(event) {
  var $field = $(this);
  $('#output').text(event.which + '-' + this.selectionStart);
  if ((event.which != 37 && (event.which != 39)) &&
    ((this.selectionStart < readOnlyLength) ||
      ((this.selectionStart == readOnlyLength) && (event.which == 8)))) {
    return false;
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />
<div id="output">
</div>

これにより、読み取り専用部分の左右矢印以外のキーが無効になります。また、読み取り専用部分の最後でバックスペース キーを無効にします。

私が読んだことから、これはIE <= 8では機能しません。

---

これはプレーンな JavaScript (JQuery なし) です。

function makeInitialTextReadOnly(input) {
  var readOnlyLength = input.value.length;
  field.addEventListener('keydown', function(event) {
    var which = event.which;
    if (((which == 8) && (input.selectionStart <= readOnlyLength)) ||
      ((which == 46) && (input.selectionStart < readOnlyLength))) {
      event.preventDefault();
    }
  });
  field.addEventListener('keypress', function(event) {
    var which = event.which;
    if ((event.which != 0) && (input.selectionStart < readOnlyLength)) {
      event.preventDefault();
    }
  });
}

makeInitialTextReadOnly(document.getElementById('field'));

<input id="field" type="text" value="CAN'T TOUCH THIS!" size="50" />

Answer 2

ここにいくつかの考えがあります

おおよそjqueryで解決

html

<input type="text" id='myinput' value ="my text">

jquery

var orginal_text = $('#myinput').val();
var regular_expression = '/^' + orginal_text +'/' ;
$('#myinput').keyup(function(){
    var current_text = $('#myinput').val();
    if(current_text.match('^' + orginal_text +'') == null){
        $('#myinput').val(orginal_text + ' ' +current_text )
    }

})

http://jsfiddle.net/e5EDY/

CSSで

html

 <input type="text" id='my_sticky_text' value ="my text" readonly='readonly'>
<input type="text" id='myinput' value ="my text">

CSS

#my_sticky_text{
    position:absolute;
    left : 0px;
}

#myinput{
    position:absolute;
    left : 50px;
    border-left:none;
}

http://jsfiddle.net/kaf4j/

値を取得するための組み合わせ

html

 <input type="text" id='my_sticky_text' value ="my text" readonly='readonly'>
<input type="text" id='myinput' value ="my text">
    <br>
    <hr>
    <button id='getval'>get value</button>

CSS

#my_sticky_text{
    position:absolute;
    left : 0px;
}

#myinput{
    position:absolute;
    left : 50px;
    border-left:none;
}

jquery

$('#getval').click(function(){
   var sticky_text = $('#my_sticky_text').val();
    var user_text = $('#myinput').val();
alert (sticky_text + ' ' + user_text)

})

http://jsfiddle.net/YsNMQ/

私たちはこのすべてから何を得ますか?!..単にあなたが望むものを良い方法で達成することはできません..そして、私がそうしたい状況を想像することはできません.

代替案

1 - テキスト フィールド ラベルに定数 text を入力します。

2 - ユーザーがフォームを送信すると、テキスト フィールドの値を取得し、テキストを追加します。

3- この入力は次のようにする必要があるというヘルプ ノートをユーザーに追加します (例: mytext-yourtext)