开发者

check if an input with specific type is selected

开发者 https://www.devze.com 2023-03-22 16:10 出处:网络
I\'m using the folowing code to check if an input field is selected but I don\'t no where the problems is, because it is not working!

I'm using the folowing code to check if an input field is selected but I don't no where the problems is, because it is not working!

   <html>
<head>
<title>Test  </title>
<head>
<body>
<form >
<input type="text" id="select" value="select"/>
</form>

<script type="text/javascr开发者_C百科ipt" >
var d, len,i, j, el;
d=document.forms;
len=d.length;
for(i=0; i<len; i++){
el=d[i].elements;
 for(j=0;j<el.length; j++)
  if(el[j].type == "text" && el[j].focus())
  {
  alert("you selected an input field with type text");
  }
}
</script>
</body>
</html>

Any help would be much appreciated! Thanks!


This script is run as soon as it is loaded you need to use an event handler.

window.onload=function(){
  var els=document.getElementsByTagName('input');
  //Gets all the input elements
  for(var i=0;i<els.length;i++){
    //Attach an event handler that gets called when the element has focus
    els[i].onfocus=checkElem;
  }
  //for your example you could do this all in one line since you only have one element.
  //document.getElementById('select').onfocus=checkElem;
}

var checkElem(){
  //Check to see if the input element that registered the event is text or not
  if(this.type=='text'){
    alert('You have selected a text input');
  }
  else{
    alert('You have selected a non-text input');
  }
}

This is a naive implementation. I'm not sure what you are trying to accomplish. Usually it is better to implement some sort of event delegation on the form element. Search for event delegation and you will find a number of resources.


I take the following portion of your code :

df=document.forms;
len=d.length;
for(i=0; i<len; i++)
els=d[i].elements;

A few notes about those four lines :

  • First line : df now contains the list of forms, ok
  • Second line : but where does this d come from ?
    • It looks like it's not initialized, so doesn't contain much...
    • ... so I don't think you'll be able to get its length
  • Fourth line : same thing
    • If d is not initialized, it doesn't point to anything, and doesn't contain anything

Are you sure you must use d and df ? And not just only df everywhere ?


Same thing a bit later, in your second for() loop : you are using a variable called el, but where do you initialize that variable ?

What I see is this :

els=d[i].elements;
 for(j=0;j<el.length; j++)

So, you put the elements in a variable called els ; and, then, you try to read from a variable called el...


Basically : before reading from a variable, you should make sure it contains something ;-)

And, in order to help you, you should install a debugging extension such as Firebug for Firefox (or use the console provided by Chrome) : it often gives interesting error messages, like this :

 

check if an input with specific type is selected


(source: pascal-martin.fr)



edit after the OP has edited the question

Next step, I would say, is to add {} where those are needed.

If you do not put {} after a for(), only one instruction will be done in the loop.
In short, if you have this :

for (i=0 ; i<10 ; i++)
    console.log('hello');
    console.log('world');

Then hello will be displayed 10 times ; but world will only be displayed one.

If you want the two console.log calls to be in the for loop, you must use brackets :

for (i=0 ; i<10 ; i++) {
    console.log('hello');
    console.log('world');
}

So, even if you don't have syntax errors, now, your code is probably not looping like you think it is.



Finally, if you want to find out which element has the focus, you should take a look at the document.activeElement property (quoting) :

Returns the currently focused element, that is, the element that will get keystroke events if the user types any.


It seems it's not quite standard yet, as it's part of the HTML-5 spec, but it seems to be supported by several browsers :

Originally introduced as a proprietary DOM extension in Internet Explorer 4, this property also is supported in Opera and Safari (as of version 4).

0

精彩评论

暂无评论...
验证码 换一张
取 消