私は2つの入力フィールドを持っており、そこで人々は数字を書くことができます。そして、私が必要としているのは、人がこの入力フィールドに書き終えたときに、いくつかの一定の単語または記号が彼の番号の近くに残っていることです。
私が上で書いたものから何も得られなかったと思うので、この例で説明しようと思います：
上部には2つの入力があり、どの人物が自分で印刷したかがわかります。そして、下部の2つの入力は、印刷していた入力からカーソルを置いたときに得られるものです。（4つの入力すべては必要ありません。2つだけです...上の2つは最初のステップを示し、下の2つは最後のステップを示します）
javascriptでできると思いますが...自分ではできず、Webでも何も見つかりませんでした...
テキストボックスへの参照を取得し（onblurイベントを試してください）、静的テキストをvalueプロパティに追加する必要があります。
jQueryを使用してblurイベントを 見てください：http： //docs.jquery.com/Events/blur#fn
簡単なサンプルは次のとおりです：http： //jsfiddle.net/jDGg9/
<form>
Field 1: <input id="ip1" type="text" value="" />
Field 2: <input id="ip2" type="text" value="" />
</form>
$('#ip1').blur(function() {
$('#ip1').val($('#ip1').val() + ' month');
});
$('#ip2').blur(function() {
$('#ip2').val($('#ip2').val() + ' month');
});
jQueryを使用して指定しなかったため、イベントblurを使用することは理にかなっているかもしれませんが、イベントを使用する基本的なJavascriptを使用した簡単な例を次に示しますonchange。
<input type="text" id="text1" value="" />
<br />
<input type="text" id="text2" value="" readonly="readonly" />
var text1 = document.getElementById("text1");
text1.onblur = function () {
var text2 = document.getElementById("text2");
text2.value = this.value + " month(s)";
};
私は以前に次のものを使用しましたが、他の何よりも画像を使用することを選択した理由は、入力に動的に追加されたテキストが混乱を引き起こし、ユーザーが編集したいときに邪魔になる可能性があるためです。画像を使用するということは、画像が常にそこにあり、ユーザーの入力の邪魔にならないことを意味します。
それはうそをついているのでjQueryでのみ書かれており、これは純粋なjsで簡単に書き直すことができ、簡単に最適化することができます。
input {
border: 1px solid black;
background: #fff;
padding: 2px;
}
<input class="right-aligned" type="text" />
<input class="left-aligned" type="text" />
次のコードでは、padding-leftとpadding-rightは、使用する画像の幅を考慮に入れる必要があります。
$(function(){
/* For left aligned additions */
$('input.left-aligned')
.css({
'padding-left': '20px',
'background-image': 'url(/favicon.png)',
'background-position' : '2px center',
'background-repeat': 'no-repeat'
});
});
左揃えのバージョンは本当にシンプルですが、右揃えのバージョンはもう少し複雑になります。
$(function(){
/* For right aligned additions */
$('input.right-aligned')
.bind('keypress keyup', function(e){
var input = $(this), measure, text = input.val(), x, w, y;
/// You can calculate text width, but it's not easily cross-browser
/// easier method, inject the text to a span and measure that instead
if ( !input.data('measure') ){
/// only build our measuring span the first time
measure = $('<span />')
.hide() // hide it
.appendTo('body')
/// try and match our span to our input font
/// this could be improved
.css({
'font-weight':input.css('font-weight'),
'font-family':input.css('font-family'),
'font-size':input.css('font-size')
});
/// store the measure element for later
input.data('measure', measure );
}
/// handle if the user types white space
text = text
.replace(/\s/g,' ')
.replace(/</g,'>');
measure = input.data('measure');
measure.html(text);
w = measure.width();
y = input.width();
/// calculate the image position (minus padding)
x = w + parseInt(input.css('padding-left')) + 2;
/// take into account the scroll ability of an input
x -= ( w > y ? w - y : 0 );
/// reposition our image background on the input
input
.css({
'padding-right': '20px',
'background-image': 'url(/favicon.png)',
'background-position' : x + 'px center',
'background-repeat': 'no-repeat'
});
}).trigger('keyup');
});
私はjavascriptなしでそれをすべてやりました...問題はそれが入力フィールドの値を変更したことでしたが、私はそれを必要としませんでした。
だから私はちょうど「$」と「月」の画像を作成し、CSSの背景として入力に追加しました...最初の入力フィールドにプロパティmaxlenth = '3'を書き込んだので、数値は書き込まれません定数テキストの上と2番目のフィールドで、CSSでpadding-left='15px'を実行しました。
みんな、ありがとう。
jQueryが利用できる場合、これははるかに簡単ですが、そうでない場合は、コードを書き直して、jQueryがなくても機能するようにすることができます。
フォーカスをinput失うとブラーイベントが発生し、フォーカスを取り戻すとフォーカスイベントが発生します。元の値を保存すると（たとえば、jQueryのデータメソッドを使用して）、求めていることをかなり簡単に実行できます。
<input type="text" name="months" class="month" />
<input type="text" name="price" class="price" />
<script>
jQuery(function($) {
$('.months')
.blur(function(event) {
// This code runs when the input with class "months" loses focus
var originalValue = $(this).val();
$(this)
.data('original-value', originalValue)
.val(originalValue + ' months');
})
.focus(function(event) {
// This code runs when the input with class "months" gains focus
var originalValue = $(this).data('original-value');
if (typeof originalValue !== 'undefined') {
$(this).val(originalValue);
}
});
$('.price')
.blur(function(event) {
// This code runs when the input with class "price" loses focus
var originalValue = $(this).val();
$(this)
.data('original-value', originalValue)
.val('$ ' + originalValue);
})
.focus(function(event) {
// This code runs when the input with class "price" gains focus
var originalValue = $(this).data('original-value');
if (typeof originalValue !== 'undefined') {
$(this).val(originalValue);
}
});
$('form.myform')
.submit(function(event) {
// This code runs when the form is submitted
// Restore the original values, so they are submitted to the server
$('.months').val($('.months').data('original-value'));
$('.price').val($('.price').data('original-value'));
});
});
</script>