我有两个输入字段，人们可以在其中输入数字。而我需要的是，当一个人在这个输入字段中写完后，他的号码附近会留下一些不变的单词或符号。
我认为你没有从我上面写的内容中得到任何东西，所以我将尝试用这个例子来解释：
在上部有两个输入，您可以看到打印自己的人。当他将光标移出正在打印的输入时，底部的两个输入是他得到的。 （我不需要所有四个输入，只需要两个……上两个只显示第一步，下两个显示最后一步）
我认为它可以通过 javascript 完成...但我自己无法做到，我在网络上找不到任何东西...
【问题讨论】：
标签： javascript html forms input
您需要获取对文本框的引用（尝试 onblur 事件），然后将静态文本附加到 value 属性。
【讨论】：
我之前使用过以下内容，我选择使用图像而不是其他任何内容的原因是因为动态添加到输入中的文本会导致混淆，并且会妨碍用户进行编辑。使用图像意味着它可以一直存在并且不会妨碍用户输入：
它只是用 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 的 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 可用，这将容易得多，但如果不可用，则可以重写代码以在没有它的情况下工作。
当input 失去焦点时，blur 事件被触发，当它重新获得焦点时，focus 事件被触发。如果您存储原始值（例如，使用 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'。
谢谢大家。
【讨论】：