Jump to content
Larry Ullman's Book Forums
Sign in to follow this  
krompir

Chapter 10 Working With Forms

Recommended Posts

I am going through chapter 10 and I have run into a problem with focus and blur events on multiple form elements. I have a function which adds multiple events and handlers to elements.

 

function addPlaceholderHandlers(elem) {
'use strict';

elem.onfocus = setOpacity;
elem.onkeydown = removePlaceholder;
elem.onblur = addPlaceholder;

} // end of addPlaceholderHandlers function

 

Then I run the following code in window.onload

 

window.onload = function() {
'use strict';

var elements = document.getElementById('caseEval').childNodes;
for (var i = 0, count = elements.length; i < count; i++) {
var element = elements[i];

addPlaceholderHandlers(element);
}
};

 

 

The onkeydown is the only code that actually runs, and I suspect that this is so because the focus and blur events do not bubble. The obvious solution is to use the addEventHandler and set the phase to true to "capture" the event, however, I am not aware that IE has an equivalent for phase. Aside from referencing each individual element, adding the event to each element, and then setting an event handler for each individual element, is there a better alternative for selecting multiple elements when using the focus and blur?or should I change my event handlers to something other then:

 

function removePlaceholder(evt) {
'use strict';

// get reference to the event
if (!evt) evt = window.evt;

// element triggering the event
var target = evt.target || evt.srcElement;

if (target.value === target.defaultValue) {
target.value = '';
}

target.style.color = '#000';

} // end of removePlaceholder function

 

I would just like to add that I absolutely love this book and the support in this forum. I have never done any programming until three or so weeks ago, and I didn't even know what HTML was just a few weeks prior to that. I feel that this book is so well written, concise in its examples, and relevant that it should be in every beginners and maybe some intermediate programmer's bookshelf. You have definitely gained a lifelong reader.

Share this post


Link to post
Share on other sites

I was thinking about using the label like this (var form = document.getElementById('caseEval'); form.getElementsByTagName('label') ) and moving it dynamically into the text box, so that users w/out Javascript would have the same functionality with the form, although, I am not sure that that would solve my phase problem. I have so many ideas, just difficulty executing them. The code you requested is below. It seems repetitive, but I don't know how else to reference target and event.

 

As always, very grateful for your time and help.

 

 

function setOpacity(evt) {
'use strict';

if (!evt) evt = window.evt;

// prevent default behavior
if (evt.preventDefault) {
evt.preventDefault();
} else {
evt.returnValue = false;
}

// get reference to element triggering the event
var target = evt.target || evt.srcElement;

// set opacity of target element text
if ( target.value === target.defaultValue) {
target.style.color = '#c8c8c8';
target.style.backgroundColor = '#fff';
target.setSelectionRange(0,0);
}

 

function addPlaceholder(evt) {
'use strict';

if (!evt) evt = window.evt;

var target = evt.target || evt.srcElement;

if ( (target.value === '') || (target.value === target.defaultValue) ) {
target.value = target.defaultValue;
target.style.color ='#7a7a7a';
target.style.backgroundColor = '#e9e9e9';
}

} // end of addPlaceholder function

Share this post


Link to post
Share on other sites

I whipped up a real quick script for testing the three events with form input elements.

 

<!DOCTYPE html>
<html lang="en">

 <head>

   <meta charset="UTF-8">

   <title>JS event test</title>

 </head>

 <body>

   <form>

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

  <br>

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

  <br>

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

   </form>

   <div id="output"></div>

   <script>

  var inputs = document.getElementsByTagName('input');

  var output = document.getElementById('output');

  for (var i = 0; i < inputs.length; i++) {

    inputs[i].onblur = blurMe;

    inputs[i].onfocus = focusMe;

    inputs[i].onkeydown = keyDownMe;

  }

  function blurMe() {

    output.innerHTML += this.getAttribute('id') + ': Blurred<br>';

  }

  function focusMe() {

    output.innerHTML += this.getAttribute('id') + ': Focused<br>';

  }

  function keyDownMe() {

    output.innerHTML += this.getAttribute('id') + ': Key down<br>';

  }

   </script>

 </body>

</html>

 

The HTML is far from valid and the the JS is sloppy, but I wrote the code that way for the sake of simplicity.

Anyway, something that's worth noting is that if you tab from one input to the next, the tab key triggers a key-down event in that input before firing the blur event for the same input.

Anyway, you might want to create a similar logging-type function for your events and first ensure whether the events are not being triggered or if they are being triggered, but then the code isn't doing anything/what you want.

 

Please report back the results.

I apologize for not looking at your code in detail, but it's late here and gotta get to bed.

If you can't resolve the issue soon, I'll take a closer look at your code later.

Thanks.

Share this post


Link to post
Share on other sites

Thank you for your help. I am afraid that now nothing works. I am really confused, so I will start at the beginning. How would you select multiple form elements including a text area?

Share this post


Link to post
Share on other sites

Is it possible to select an attribute of an input tag? For example, if you had:

<input type="text" value="Your Name">

Is it possible to select the value attribute of the input tag?

Share this post


Link to post
Share on other sites

What do you mean by, "I am afraid that now nothing works?"

You need to explain a little bit more what's going on, or we can't help.

 

You can reference element attributes by using the getAttribute method.

Share this post


Link to post
Share on other sites

Thank you for your help. I set up a similar event testing function, and it turns out that the keydown was creating some issues, since it was not firing when I expected. BTW, the reason "nothing was working" was because I didn't start my server. I was so preoccupied with trying to get this to work, that I ignored the simple things. I remembered that Larry wrote to just step away, eat an apple...and then come back fresh, and all of a sudden everything was making sense. Thank you for all your help yet again.

Share this post


Link to post
Share on other sites

Well, glad you resolved that issue.

Anyway, is everything working the way you expected now?

 

The main reason I recommended that test script is because I had a feeling that various events were firing when you didn't expect them to.

Well, let us know if you need more help.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...