Fixed text at end of textarea

Question

Hello,

Is there any way to get a fixed, default text on the end of the text in a textarea? Why? I have a textarea to make twitter stsatuses, and at the end, every user have to have their signature. So I want to have it in the text, that they can't delete.

Any code or plugin to do that?

Answer 1

I had to solve a similar problem not too long ago. Instead of a fixed text, I decided to limit the number of works they could add to the twitter text area so that instead of 140 characters allowed, only 110 characters were allowed. I enforced this using jquery, on the client side and also verified it on the server side.

In your case use the same code as below but replace:

tweet = $('#edit-tweet').val();

with

tweet = $('#edit-tweet').val() + 'Your Signature';

This is the code I used on the client side:

  $(document).ready(function() {

    var tweet_area = $('#edit-tweet');

    tweet_area.keyup(count_down);

    count_down();

    dim();

    tweet_area.hover(highlight, dim);

  });


/**
 * Count down function
 */
function count_down() {
  var left = 110 - $('#edit-tweet').val().length;

  if (left < 0) {
    left = 0;
    limit_text(tweet);
  } else {
    tweet = $('#edit-tweet').val();
  }
  $('#counter').text(' - ' + left);
}

/**
 * Limits the tweet text value to static sized tweet.
 * 
 * @param tweet
 *          the static sized tweet
 */
function limit_text(tweet) {
  $('#edit-tweet').val(tweet);
}

/**
 * Callback for hover in function
 */
function highlight() {

  var tweet_style_focusin = {
    'width' : '600px',
    'height' : '50px',
    'border' : '3px solid #cccccc',
    'padding' : '5px',
    'font-family' : 'Tahoma, sans-serif',
    'background-image' : 'url(bg.gif)',
    'background-position' : 'bottom right',
    'background-repeat' : 'no-repeat'
  };

  $(this).css(tweet_style_focusin);

  $(this).focus();

}

/**
 * Callback for hover out function
 */
function dim() {
  var tweet_style_foucsout = {
    'width' : '600px',
    'height' : '50px',
    'border' : '1px solid #cccccc',
    'padding' : '5px',
    'font-family' : 'Tahoma, sans-serif',
    'background-image' : 'url(bg.gif)',
    'background-position' : 'bottom right',
    'background-repeat' : 'no-repeat'

  };

  $('#edit-tweet').css(tweet_style_foucsout);
}

Answer 2

I don't think this is possible, but I would use another approach. You can add an disabled textarea or simply a div under the textarea for the main text.

<textarea name="blabla"><textarea>
<div class="signature">signature</div>

And than do the job in the backend.

I don't know what your using.

So for php something like this:

<?php $_POST['blabla'] .= $signature ?>

In rails something like this:

def some_action
  params[:blabla] << signature
end

This way the user can't change the signature in no way. Even if you find a jQuery solution that works, it always isn't secure, because the user can change the javascript code, or disable it completely, than the user is able to change his signature.

IMHO a server side approach is the best way to do this.

Answer 3

I would create a div of exactly the same width under the textarea. I'd try to make them look like one solid textarea as much as possible by making sure the borders and backgrounds are consistent and eliminating the bottom border of the textarea and the top border of the div using CSS.