Results 1 to 2 of 2

Thread: Can you determine the field that the cursor is in using javascript?

  1. #1
    Join Date
    Jul 2006
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Can you determine the field that the cursor is in using javascript?

    Hi,

    I'm new to JavaScript, but I am trying to write a script that adds text to the fields of a form whan a button is clicked:

    ------------------------------------------------------------------------
    <script language="javascript" type="text/javascript">
    function addStuff() {
    var newtext ='New Stuff';
    document.create.title.value += newtext;
    }
    </script>


    <FORM NAME="create">
    Enter the course title:<BR><INPUT TYPE=TEXT SIZE=66 NAME="title">
    </FORM>
    <input type="button" value="Add Text" onClick="addStuff();">
    --------------------------------------------------------------------------

    The code works, and when I click on my button, "New Stuff" appears in the text area named "title". Here is my problem. I want to have multiple fields on the form along with text areas, but I only want to have one button that works for all the fields. They way my code is written now, I would need a function for every field since I use document.create.title.value +=newtext;

    Is there a way I can determine name of the field that the cursor is currently in using something like onFocus and pass it to the function as a variable so that it will work on any field?

    Thanks in advance for any advice.

  2. #2
    Join Date
    Jun 2005
    Location
    英国
    Posts
    11,876
    Thanks
    1
    Thanked 180 Times in 172 Posts
    Blog Entries
    2

    Default

    Code:
    window.focussedFormElement = null;
    
    function addStuff() {
      var newtext = 'New Stuff';
      window.focussedFormElement.value += newtext;
    }
    
    window.onload = function() {
      var n = function() {
        window.focussedFormElement = this.form.focussedElement = this;
      }, p = function() {
        window.focussedFormElement = this.form.focussedElement = null;
      };
      for(var i = 0, f = document.forms; i < f.length; ++i) {
        f[i].focussedElement = null;
        for(var j = 0, e = f[i].elements; j < e.length; ++j) {
          e[j].onfocus = n;
          e[j].onblur = p;
        }
      }
    };
    Notes on your original code:
    Forms needn't always be collected as properties of the document element, and elements needn't always be collected as properties of their forms. You should use the document.forms and form.elements collections instead (for example, rather than document.create.title.value, you should use document.forms.create.elements.title.value). However, it's a much better and more flexible idea to pass the form or element to the function as a parameter, rather than hard-coding it into the function. That way, if you change the name of the form or its elements, the function still works.
    Twey | I understand English | 日本語が分かります | mi jimpe fi le jbobau | mi esperanton komprenas | je comprends franšais | entiendo espa˝ol | t˘i Ýt hiểu tiếng Việt | ich verstehe ein bisschen Deutsch | beware XHTML | common coding mistakes | tutorials | various stuff | argh PHP!

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •