我有两个输入字段，人们可以在其中输入数字。我需要的是当一个人在这个输入字段中完成书写时，一些不变的单词或符号会留在他的号码附近。
我认为你没有从我上面写的内容中得到任何东西，所以我将尝试用这个例子来解释：
在上部有两个输入，您可以看到自己打印的是什么人。当他将光标移出正在打印的输入时，底部的两个输入是他得到的。（我不需要所有四个输入，只需要两个......上两个只显示第一步，下两个显示最后一步）
我认为它可以通过 javascript 来完成......但我自己无法做到，我在网络上找不到任何东西......
您需要获取对文本框的引用（尝试 onblur 事件），然后将静态文本附加到 value 属性。
看看使用 jQuery 的模糊事件：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');
});
如果jQuery可用，这将容易得多，但如果没有，代码可以重写以在没有它的情况下工作。
当一个input失去焦点时，会触发模糊事件，当它重新获得焦点时，会触发焦点事件。如果您存储原始值（例如，使用 jQuery 的data方法），您可以很容易地完成您的要求：
<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>
我已经在没有 javascript 的情况下完成了这一切......问题是它改变了输入字段的值，但我不需要那个。
所以我刚刚制作了'$'和'month'的图像并将它们作为CSS中的背景添加到输入中......在第一个输入字段中我写了一个属性maxlenth ='3'所以不会写数字在常量文本和第二个字段中，我在 CSS 中完成了 padding-left='15px'。
感谢大家。