Problems with textarea focus

Question

My textarea is behaving very strange, when I click inside it .. the cursor appears there when I click, if I click on the middle of the textarea it appears there, and I'd like it to appear on the beginning wherever I click inside, like here on SO when asking question, wherever you click inside textarea it takes your cursor to the topmost left. What can I do to fix this?

EDIT:

The reason for why I wanna fix this is because I get extra spaces in database.

Here is some code :

<textarea class="passage" name="texti" rows="5" cols="10">
                </textarea>

CSS:

.passage {
        color: #333;
        font-size: 12px;
        height: 80px;
        width: 279px;
    }

Answer 1

The only explanation I have for the behaviour you describe is lots of white spaces in the textarea. In an empty textarea, the cursor should always automatically jump to the left.

Answer 2

It's behaving this way because there is space there, between your tags. If you don't want space there initially, do this:

 <textarea class="passage" name="texti" rows="5" cols="10"></textarea>

Whatever is between the tags in a <textarea>, that's the initial content.

Answer 3

I had this isuue once and it was because a wrong javascript function, which I never used it in my application.

1. try to rename the textarea.
2. if problem still remains, try to find methods or functions which may update the textarea with white space.

3. if you couldn't find the method, write a line ofcode on OnTextChanged event

   protected void TextArea1_OnTextChanged(object sender, eventArgs e)
   {
      TextArea1.Text = TextArea1.Text.trim();
      //or  TextArea1.Text = string.empty;
   }
   

Answer 4

If there is really no way you can fix it so that the markup gives you a truly empty textarea, you can use some javascript like this to set the cursor position onclick:

function cursorTo00(area) {
  if (area.innerHTML.match(/^\s+$/)) {
    area.selectionStart = area.selectionEnd = 0;
  }
}