Question

I have two input fields, where people can write numbers. And what I need is when a person finished writing in this input field some constant words or symbols are left there near his number.

I think that you didn’t get anything from what I wrote above so I will try to explain with this example:

In the upper there are two inputs you see what person printed himself. And two inputs in the bottom are what he gets when he puts his cursor out of the input where he was printing.
(I don’t need all four inputs, just two…upper two just show the first step and bottom two show the final step)

I think it can be done by javascript… but I couldn’t do it by myself and I couldn’t find anything in web…

Answer 1

I’ve used the following before, the reason I chose using an image over anything else was because text added to an input dynamically can cause confusion, as well as getting in the way when users wish to edit. Using an image meant it could be constantly there and wouldn’t get in the way of the user typing:

It’s only written in jQuery because it was lying around, this could easily be rewritten in pure js – and it could easily be optimised.

http://jsfiddle.net/pafMg/

css:

input { 
  border: 1px solid black;
  background: #fff;
  padding: 2px;
}

markup:

<input class="right-aligned" type="text" />
<input class="left-aligned" type="text" />

code:

In the following code the padding-left and padding-right has to take into account the width of the image you use.

$(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'
      });
});

The left aligned version is really simple, the right aligned gets a little bit more complex however:

$(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');
});