テキストエリアの一部を実質的に「保護」することはできません。単純に、カーソルが{...}
パターン内にあるときに入力キーの押下をブロックしようとすることもできますが、編集する方法は他にもたくさんあります。範囲を選択してから削除/置換、切り取り/コピー/貼り付け、ドラッグ アンド ドロップ...
単純にテキストエリアの値を監視し、値に何か問題がある場合はその下に警告を表示する方がよい場合があります。たとえば、次のようになります。
<textarea id="mail_text">...</textarea>
<div id="mail_text_warning"></div>
<script type="text/javascript">
function checkMailText() {
var tokens= ['username', 'recipient', 'salutation'];
var value= $('#mail_text').val();
var problems= [];
$.each(tokens, function() {
if (value.split('{'+this+'}').length!==2)
problems.push('Please ensure there is one and only one {'+this+'} token present in the text');
});
matches= value.match(/\{[^\}]*\}/g);
if (matches!==null) {
$.each(matches, function() {
for (var i= tokens.length; i-->0;)
if ('{'+tokens[i]+'}'===this)
return;
problems.push('Token '+this+' is not known');
});
}
$('#mail_text_warning').text(problems.join('. '));
}
setInterval(checkMailText, 500);
</script>