Detect text input

Question

I am trying to understand this JS function: JS Fiddle Demo

I basically got it out of a book that I am trying to learn from. The book is called "JavaScript: The Definitive Guide" (pg484). But the function does not include the html that goes with it. I'd appreciate if someone could help me write the html that would make this work, thereby I might be able to get a better understanding how it works. I have made a stab at this with the link above.

I really don't like this book the way it does this. It happens a lot. I am a novice, does anyone have advice of what to do other than just come on here and try and get an answer.

Appreciate any help.

//Example 17-7. Using the propertychange event to detect text input
function forceToUpperCase(element) {
  if (typeof element === "string") element = document.getElementById(element);
  element.oninput = upcase;
  element.onpropertychange = upcaseOnPropertyChange;
  // Easy case: the handler for the input event
  function upcase(event) { this.value = this.value.toUpperCase(); }
  // Hard case: the handler for the propertychange event
  function upcaseOnPropertyChange(event) {
    var e = event || window.event;
    // If the value property changed
    if (e.propertyName === "value") {
      // Remove onpropertychange handler to avoid recursion
      this.onpropertychange = null;
      // Change the value to all uppercase
      this.value = this.value.toUpperCase();
      // And restore the original propertychange handler
      this.onpropertychange = upcaseOnPropertyChange;
    }
  }
}

Please take the time to indent your code. Nobody wants to read that mess. If you want our help, at least make it as pleasant as possible for us. — user229044, Jul 17 '13 at 03:30
try http://jsfiddle.net/arunpjohny/vP9kD/1/ or http://jsfiddle.net/arunpjohny/vP9kD/2/ — Arun P Johny, Jul 17 '13 at 03:35

score 0 · Answer 1 · answered Jul 17 '13 at 04:06

0

Related HTML might be:

<input type="text" id="i0">

<script>
  window.onload = function() {
    forceToUpperCase('i0')
  }
</script>

However, I'm not sure what the function is doing is useful or that the listener attachment and detachment methods used are robust. But it might be useful for understanding certain aspects of events and listeners.

answered Jul 17 '13 at 04:06

RobG

142,382
31
172
209

hi RobG, tks for this but don't fully get what your doing. – HattrickNZ Jul 22 '13 at 00:35
The answer adds an element to the page with ID *i0*, then calls the *forceToUpperCase* function when the page has finished loading. The function adds listeners to the *input* and *propertychange* events for the element. – RobG Jul 22 '13 at 03:08

score 0 · Answer 2 · answered Jul 19 '13 at 13:32

<!DOCTYPE html>
<html>
   <head>
      <script>
        var element = document.getElementbyId(Java_C#);
         function forceToUpperCase(element) { 
           if (typeof element === "string") element = document.getElementById(element);    
              element.oninput = upcase;
              element.onpropertychange = upcaseOnPropertyChange;
        // Easy case: the handler for the input event

         function upcase(event) { this.value = this.value.toUpperCase(); }
        // Hard case: the handler for the propertychange event

         function upcaseOnPropertyChange(event) {
         var e = event || window.event;

        // If the value property changed
         if (e.propertyName === "value") {

        // Remove onpropertychange handler to avoid recursion
         this.onpropertychange = null;

       // Change the value to all uppercase
         this.value = this.value.toUpperCase();

      // And restore the original propertychange handler
        this.onpropertychange = upcaseOnPropertyChange;
    }
  }
} 
      </script>
   </head>
<body>
  <p id="Java_C#">
     Public static void main{}
  </p>
</body>
</html>

tks but was hoping to get a working example that I could interact with and see working as Arun has done above. — HattrickNZ, Jul 22 '13 at 00:36

Detect text input

2 Answers2