Question

我有两个输入字段，人们可以在这里写数字。而我需要的是当一个人在这个输入字段中完成写作时，在他的数字附近会留下一些常数字或符号。

我认为你没有从我上面写的内容中得到任何结论，所以我将尝试用这个例子来解释： example

在鞋面上有两个输入，你可以看到自己打印的是什么。底部的两个输入是当他将光标从他正在打印的输入中移出时得到的。（我不需要所有四个输入，只需要两个......上面两个只显示第一步，下面两个显示最后一步）

我认为可以通过javascript完成...但我不能自己做，我在网上找不到任何东西......

Answer 1

您需要获取文本框的引用（尝试onblur事件），然后将静态文本追加到value属性。

Answer 2

使用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');
});

Answer 3

由于你没有指定使用jQuery，这里是一个使用blur事件的基本Javascript的简单示例（正如大家已经指定的那样）尽管使用{{1}可能是有意义的event：

http://jsfiddle.net/A9yVv/1/

onchange

Answer 4

之前我使用过以下内容，之所以选择使用图像而不是其他原因，是因为动态添加到输入中的文本会导致混淆，以及当用户希望编辑时会妨碍图像。使用图像意味着它可以一直存在，并且不会妨碍用户输入：

它只用jQuery编写，因为它存在于周围，这很容易在纯js中重写 - 并且可以很容易地进行优化。

http://jsfiddle.net/pafMg/

的CSS：

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,'&nbsp;')
              .replace(/</g,'&gt;');
          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');
});

Answer 5

如果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>

Answer 6

我在没有javascript的情况下完成了所有操作...问题是它改变了输入字段的值，但我不需要它。

所以我刚刚制作了'$'和'month'的图像，并将它们作为CSS的背景添加到输入中......在第一个输入字段中，我写了一个属性maxlenth ='3'所以数字赢了' t写在常量文本上，在第二个字段中我在CSS中做了padding-left ='15px'。 solution

谢谢大家。

向输入的文本添加常量文本

6 个答案:

的CSS：

标记：

码