Jqueryを使用してテキストボックスに永久プレフィックスを追加する方法

テキストボックスのウォーターマークのバリエーションを希望します。しかし、ウォーターマークが消えないようにしたい。入力したり、削除したりすることができないプレフィックスのように動作します。私も接頭辞がテキストボックスの値の一部として提出したいJqueryを使用してテキストボックスに永久プレフィックスを追加する方法

<div style="border: solid 1px black; width:250px;"> 
    <label style="border:none;">prefix_</label> 
    <input type="text" style="border:none;"/> 
</div>

：私は、次のようなHTML/CSSのソリューションを使用する必要はありません。私はjqueryのソリューションが欲しいです。しかし、私は見つけることができないので、検索に適切なキーワードを使用してはいけません。誰でもアイデアはありますか？

出典

2012-02-27 Shawn Doe

テキストボックスにどのように追加するかわからないので（リムーバブルではありません）、テキストボックスの値を呼び出すときに接頭辞を追加するだけで済みます。例えば：

<input type = 'text' id = 'inputID' /> 

<script type = 'text/javascript'> 
    var MyVar = document.getElementById('inputID').value; 
    var finalVar = "prefix_" + MyVar; 
    MyVar.value = finalVar; 
</script>

は、あなたがテキストボックスの提出時に接頭辞を付加でき

出典

2012-02-27 16:08:50 CKKiller

「onclickの機能」または「onKeyDownメソッド」機能に取り付けます。このように、接頭辞を削除しようとしているユーザーを処理する必要はありません。

$('#submitbutton').click(function{ 
    var valueiwant = "myprefix "+$('#textfield').val(); 
});

希望、これはこれは永久的な接頭辞を維持扱うでしょう

出典

2012-02-27 16:10:39

私はしかし、私は、ユーザーがしたいと考えています彼らが入力した入力は格納されているものではないことを知っている。今はテキストボックスの左にラベルとしてプレフィックスを付けていますが、それを改善したいと思いました。 –

他の回答の長所と短所を考慮すると、これが最良の解決策になるかもしれません...ラベルを適切に使用すると（ツールチップなど）、ユーザーは入力した内容がプリペンドされることを知ります。 –

役立ちます：

$('#field').keyup(function() { 
    var prefix = 'string' 
    if (this.value.substring(0, prefix.length) != prefix){ 
    $(this).val(prefix) 
    } 
});

出典

2012-02-27 16:14:52

接頭辞の上にマウスを貼り付けることを防ぐために、 '.onblur（）'と同じものをバインドする必要があります... –

これは近いようです。ホームやマウスを使用してカーソル位置を変更したりプレフィックスを変更することはできますが、変更は保持されません。私はこの動作を改善して、変更を実際には無視してから無視するようにしたいと思います。 –

@ShawnDoeはそれが可能だとは思わない - あなたは '.keydown'にバインドすることができるが、タイプされている文字をブロックするために何もない（私が知っている）... –

はここにjQueryで私の試みです：http://jsfiddle.net/5n6WF/

$(function() { 
    $('#field').val($('#field').data('prefix')); 

    original_value = $('#field').val(); 

    $('#field').keyup(function() { 
     var f  = $(this), 
      prefix = f.data('prefix'), 
      rx  = new RegExp('^' + escape(prefix)); 

     new_value = prefix + unescape(escape(f.val()).replace(rx, '')); 

     if (original_value != new_value) { 
      original_value = new_value; 
      f.val(new_value); 
     } 
    }); 
});

出典

2012-02-27 16:16:10 deefour

私はこれが使えるので、マウスを最初にカーソルを置くと私は "Q"を入力すると、 "いくつかのprefixQsomeプレフィックス"ボックスに表示されます。 –

これはMatt Coferの答えと同じバグです。単一の文字を削除し、プレフィックス全体を前に変更したプレフィックスとともにプレフィックスします。 –