I have the following JavaScript code:
/* Only numbers input in the CELL text box */
function ValidateKeyNumber()
{
var key=window.event.keyCode;
var allowed='0123456789';
return allowed.indexOf(String.fromCharCode(key)) !=-1 ;
}
This JS working fine in IE & Chrome but not in FF. Can you please tell me what is wrong with this? I need the JS to work in these 3 major browsers.
FYI:
I use the latest FF version.
JavaScript is enabled in FF.
I don't use jQuery
Any help will be appreciated.
UPDATE:
FULL PAGE CODE:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>JavaSCript Input Test</title>
<script>
/* Only numbers in mobile text-box */
function ValidateKeyNumber()
{
var key=window.event.keyCode;
var allowed='0123456789';
return allowed.indexOf(String.fromCharCode(key)) !=-1 ;
}
</script>
</head>
<body>
<form>
<label>Cell Number:</label><input type="text" name="cell" size="30" maxlength="10" onKeyPress="return ValidateKeyNumber()"/>
</form>
</body>
</html>
The problem is that window.event isn't defined in Firefox. The solution is to use the argument passed to the event handler, for example
<label>Cell Number:</label><input type="text" name="cell" size="30" maxlength="10" onKeyPress="return ValidateKeyNumber(event)"/>
function ValidateKeyNumber(event) {
var key=(event||window.event).keyCode;
var allowed='0123456789';
return allowed.indexOf(String.fromCharCode(key)) !=-1 ;
}
Related
I want to move mouse focus when keydown is enter,to emulate enter as tab.
function jump(event){
var ob = event.target;
if(event.keyCode == 13){
if(ob.nextElementSibling){
ob.nextElementSibling.focus();
}
else{
ob.parentNode.children[0].focus();
}
}
}
document.body.addEventListener("keydown",jump,true);
content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">
My expectation:
When you type some characters ,for example test in the input whose id is "1th",and press enter,the mouse focus jump into the input whose id is "2th".
When you type some characters ,for example test in the input whose id is "4th",and press enter,the mouse focus jump into the input whose id is "1th".
I tested my code ,no error info occur,but it can't achieve my target.
How to fix it?
I have set breakpoint at the 23th line,still nothing found.
As per the chat discussion, your issue is that the nextElementSibling in the <br/>. If you dont want to use nextElementSibling.nextElementSibling, There are two options that can help you here:
Either:
Remove the <br> and use CSS to add the necessary margin-bottom.
Or:
Add a class to your input/textArea elements and use jQuery with the function .next('className'). There are equivalents in Javascript but it will add a lot of unnecessary code.
I definitely recommend the first option than loading a whole library if the only use would be that one function.
According to the chat with callback.
1.Format1:script is at the head ,add window.onload.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload = function(){
function jump(event){
var ob = event.target;
if(event.keyCode == 13){
if(ob.nextElementSibling != null){
ob.nextElementSibling.nextElementSibling.focus();
}
else {
ob.parentNode.children[0].focus();
}
}
}
document.body.addEventListener("keydown",jump,true);
}
</script>
</head>
<body>
content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">
</body>
</html>
Format 2:script is put at the end of the last input whose id is 4th.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
content:<input id="1th" type="text">
<br/>
content:<textarea id="2th" cols=6 rows=5></textarea>
<br/>
content:<input id="3th" type="text">
<br/>
content:<input id="4th" type="text">
<script>
function jump(event){
var ob = event.target;
if(event.keyCode == 13){
console.log(ob.nextElementSibling.tagName);
if(ob.nextElementSibling.tagName == "BR"){
ob.nextElementSibling.nextElementSibling.focus();
}
else if(ob.nextElementSibling.tagName == "SCRIPT"){
ob.parentNode.children[0].focus();
}
}
}
document.body.addEventListener("keydown",jump,true);
</script>
</body>
</html>
The whole code is position-related,different position of script's content in the html file,you should write different js code for that.
I have written the below mentioned javascript and have called on the button click event but somehow it doesn't work, please someone help.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script type="text/javascript">
function f1()
{
var x=document.getElementById("txt1").innerHTML
if(x==1)
{
alert("hello");
}
}
</script>
<body>
<form id="form1">
<input type="text" id="txt1"/><br/>
<input type="button" id="btn1" value="submit" onclick="f1()"/>
</form>
</body>
</html>
You're trying to grab innerHTML from an input field when you should be grabbing the value otherwise it'll always be undefined:
Change:
var x = document.getElementById("txt1").innerHTML;
to:
var x = document.getElementById("txt1").value;
JSFiddle Example
http://jsfiddle.net/moogs/dNWNP/1/
It should not be .innerHTML, but .value.
You should use value instead of innerHTML:
var x=document.getElementById("txt1").value;
See the jsfiddle.
In Chrome browser, when you click on CloudCover on this web page, a description is revealed below. In IE the description is not revealed. Any suggestions to make this work in IE?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>min test</title>
<script type='text/javascript'>
function showDescription (sel) {
var myVarDescip, myVarTEXT;
var myVar = (sel.value);
document.getElementById('putDescriptionHere').innerHTML = "";
myVarDescip = (myVar + "Descrip");
myVarTEXT = document.getElementById(myVarDescip).innerHTML;
document.getElementById('putDescriptionHere').innerHTML = myVarTEXT;
}
</script>
</head>
<body>
<select id="destSelect" size="3" multiple="multiple">
<option value="CloudCover" onclick="showDescription(this);">Cloud Cover</option>
</select>
<div id="CloudCoverDescrip" style="display: none">
<b>Cloud Cover:</b> The percentage of sky occluded by clouds.
</div>
<div id="putDescriptionHere"></div>
</body>
</html>
You can't attach mouse events on options in IE, so the click never fires.
Use the onchange event on the select instead
<select id="destSelect" size="3" multiple="multiple" onchange="showDescription(this);">
FIDDLE
I want to create a TextField in which when I give any input it show on div and this script is showing inputs but not properly...
I don't know where I am making mistakes and I request that please give your answers only in JavaScript please don't use jquery. Thank you .
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form name="form">
<input name="t" value="" onkeypress="printvalues();">
</form>
<div id="divId"></div>
</body>
</html>
script
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML += form.t.value;
}
Here is my code with output
function printvalues() {
var div = document.getElementById("divId");
div.innerHTML = document.form.t.value;
}
EDIT:The keypress event executes before the value of textbox is changed so use keyup() event which triggers when the key is released instead like
<input name="t" value="" onkeyup="printvalues();">
Your solution is here....
Just change onkeypress to onkeyup
Made below changes and enjoy..
function printvalues(a) {
var div = document.getElementById("divId");
div.innerHTML=a;
}
<input type="text" name="t" onkeyup="printvalues(this.value);">
I am trying to get the user to put something into the text area and the output should be what he wrote repeapiting x amount of times, but I get an error "document.forme is undefined".
Can you please help me understand why it is undefined?
My code:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>input home work</title>
<script type="text/javascript">
var help= document.forme.tryout.value;
for (x=1; x<=10;x++){
function numberCheak (){
document.write("this is"+" "+help++);
}
}
</script>
</head>
<body>
<form name="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onClick="numberCheak();"/>
</form>
</body>
</html>
Ok, you have a few problems. The first is that you are trying to access a form element that doesn't exist yet: the script is above the form element, so the form doesn't exist when you try to get it. If you move the script to the bottom of the page it will work better.
Second, the loop should be inside the function, not wrapped around the function.
Third, document.write has weird side effects and causes the document to be rewritten and will stop the script from continuing correctly.
Here's my revised script
function numberCheak() {
var help = document.forme.tryout.value;
for (var x = 1; x <= 10; x++) {
document.getElementById("output").innerHTML += help;
}
}
and the HTML form that goes with it
<form name="forme" id="forme">
<input name="tryout" type="text" />
<input type="button" value="click me" onclick="numberCheak();" />
<span id="output"></span>
</form>
You can see it in action on jsFiddle.
Forms are stored in collection and can be accessed like this:
var form = document.forms[i];
or
var form = document.forms[name];
In your case, i is 0 and name is forme.