|
JavaScript - Onclick Blur
Hi,
please can someone help I wanted to blur the text in my formfield when a user clicks on it?! Code: <script language="javascript">
function cbevent()
{
var xx = document.loginform.myusername.blur();
}
</script>
<form name="loginform">
<input type="text" name="myusername" onMouseClick="cbevent()" value="Enter your email address here" />
Similar TutorialsHi, I have do a calculation when an user enters the value in the textbox during onblur event. But during the onblur event I need to capture the tabkey (keyCode) and if it is 9 do the calculate else not do that. But the problem is we cannot detect a keyCode for tab in onblur. But for sure I need to use onblur in this case and cannot use onkeydown as this will have impact on the UI screen for this particular scenario. How to go about this? in the textbox I am calling onblur = "test()" Please provide a helping hand. Thanks. I have been working on this code for days and I cannot get it right!!! Can anyone please give me any pointers. It should have an error message that pops up on same line as text boxes when into is not entered property! Thanks in advance! NewBanks <html xmlns="http://www.w3.org/1999/xhtml"> <head> <script type="text/javascript"> function validate(){ var errorList = new Array(); var eMail = document.getElementById("email").value; var passwrd = document.getElementById("password").value; var cPassword = document.getElementById("confirmPassword").value; var secQuest = document.getElementById("securityQuestion").value; var secAns = document.getElementById("securityAnswer").value; var regEx = /^\s*[\w\\+_]+(\.[\w\\+_]+)*\@[\w\\+_]+\.[\w\\+_]+(\.[\w\\+_]+)*\s*$/; if(!regEx.test(eMail)){ errorList[errorList.length] = ("You must enter a valid email address!<br/>"); valid = false; } if(passwrd == "" || passwrd.length <6){ errorList[errorList.length] = ("Your password must be 6 characters long! <br/>"); valid = false; } if(passwrd != cPassword){ errorList[errorList.length] = ("Passwords do not match! <br/>"); valid = false; } if (secAns == ""){ errorList[errorList.length] = ("Please enter your Security Answer! <br/>"); valid = false; } if(errorList.length > 0){ for(var i = 0; i < errorList.length; i++){ document.getElementById("errors").innerHTML += errorList[i]; } return false; } else return true; window.onload = function() { 0(); } } </script> </head> <body> <form id="login" action="confirm.html"method="get" onsubmit="return validate();"/> Email: <input type="text" name="email" id="email" onblur="validate(this);" /> <br/><span id = "Invalid Email"></span> Password: <input type="text" name="password" id="password" onblur="validate(this);" /> <br/><span id = "Incorrect Password"></span> Confirm Password: <input type="text" name="password" id="confirmPassword" onblur="validate(this);" /> <br/><span id = "Invalid password"></span> Security Question: <select id = "securityQuestion" onblur="validate(this);"> <option value= "maiden" >What is your mother's maiden name </option> <option value= "animal"> What is your favorite animal </option> </select> <br/> <input type="text" name="securityAnswer" id="securityAnswer" onblur="validate(this);" /> <br/><span id = "Security Answer does not match"></span> <p><input type = "Submit" /></p> <span id = "errors"> </span> </form> </body> </html> Hi all, A piece of code I have been working on has a small issue with bluring off a div and I can't working out why. Basically what I do is append divs to the DOM and on double click I make them editable and when I blur they are none editable and I append a new div into the document. I have quickly knock up a small piece of code to illustrate the problem ... Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style text="text/css">
.dropArea {
color:#757575;
font-weight:bold;
display:block;
margin:0px;
border: 1px dashed #999999;
background-color:#DDDDDD;
left:10px;
right:10px;
/*width:auto;*/
text-align:center;
line-height:20px;
}
.textEditArea {
display:block;
margin-bottom:10px;
border: 1px dashed #999999;
background-color:inherit;
left:10px;
right:10px;
padding:5px;
width:auto;
}
</style>
<script>
function makeEditable(activeZone) {
if (activeZone.className == "dropArea") {
activeZone.innerHTML = "";
}
activeZone.contentEditable = true;
activeZone.className = "textEditArea";
}
function doneEditing(activeZone) {
// if no HTML added, make it a drop zone
if (trim(activeZone.innerHTML) == "") {
activeZone.className = "dropArea";
activeZone.innerHTML = "Drop items from or double click to add text";
} else if (activeZone.addDropZoneAlready == undefined) {
// add a new drop zone underneath
activeZone.title = "Double click to edit text";
activeZone.addDropZoneAlready = "true";
activeZone.zoneType = "textDisplay";
addNewDropZone();
}
activeZone.contentEditable = false;
}
function addNewDropZone() {
var dropArea = document.createElement("div");
dropArea.className = "dropArea";
var appendTo = document.body;
appendTo.appendChild(dropArea);
dropArea.ondblclick = function () { makeEditable(dropArea); };
dropArea.onblur = function () { alert('done'); doneEditing(dropArea); };
dropArea.innerHTML = "Drop items or double click to add text";
}
</script>
</head>
<body onload="addNewDropZone();">
<div onDblClick="this.contentEditable=true;" onBlur="this.contentEditable=false;alert('Done!');" style="background-color:#C0C0C0; width: 500px; height:200px;"></div>
</body>
</html>
The div in the body already works as expected, it alerts "Done!" however divs I append into the document have to blur twice before the onblur fires? I just don't undestand why its doing it. Anybody have any ideas as to what is happening? Thanks, Dale Hi guys, I have the following code that should hide the dropdown part of a select box when clicked (don't ask why, this is part of a separate project). Please see a simple example below: Code: <script language="javascript" type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.js"></script>
<select name="select1" id="select1" onfocus="$(this).blur();">
<option value=""></option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
</select>
This all works fine in IE and FF but in chrome the options are still shown after clicking the element. I've been racking my brains for hours on this and, no matter what method I use, I can't get this to work correctly in Chrome. Can anyone suggest a way I can get this to work? Thanks in advance! I have these "editable" divs in my document. When you click them, a text box comes up and you type something and push enter. It changes what's in the div. There is also a blur event associated with the text box. When the user tabs or clicks away, it fires the blur event. Here lies the problem. I have other elements on the page that are clickable. I don't want those clickable things to fire their events if the user is clicking away from the text box, ie. the blur event. This isn't a problem is the user pushes tab, for instance. So my thought was that if i know how the user blurred (via keyboard, or clicking) i could take the appropriate action. Any ideas? I have a JavaScript that remembers the values of a form by creating cookies for each input element onblur. I cannot figure out though how to exclude one input field from being remember. It would be document.getElementsByTagName('input')[15] Every time I try to add an if/else statement in using that line, the script doesn't work altogether. Code: window.onload = function() {
rememberFormInputs('rma', 'input-');
}
/**
* Set a cookie
* @param string cookie name
* @param string cookie value
* @param string cookie expiration counter in days
* @param string cookie path
* @param string cookie domain
* @param bool secure?
*/
function setCookie(name, value, expires, path, domain, secure) {
var today = new Date();
today.setTime(today.getTime());
if (expires) {
expires = expires * 1000 * 60 * 60 * 24;
}
var expires_date = new Date(today.getTime() + (expires));
document.cookie = name+"="+escape(value) +
((expires) ? ";expires="+expires_date.toGMTString() : "") +
((path) ? ";path=" + path : "") +
((domain) ? ";domain=" + domain : "") +
((secure) ? ";secure" : "");
}
/**
* Get a cookie value
* @param string cookie name
*/
function getCookie(name) {
var start = document.cookie.indexOf(name + "=");
var len = start + name.length + 1;
if ((!start) && (name != document.cookie.substring(0, name.length))) {
return null;
}
if (start == -1) return null;
var end = document.cookie.indexOf(";", len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len, end));
}
/**
* Remebers form inputs after you fill them in
* @param string form id to remember fields
* @param string a prefix to prepend to all cookie names. (prevent naming conflicts)
*/
function rememberFormInputs(form_id, prefix) {
var form = document.getElementById(form_id);
var els = document.getElementsByTagName('input');
for (var i = 0; i < els.length; i++) {
var el = els.item(i);
if (el.type == 'text') {
el.onblur = function() {
var name = this.name;
var value = this.value;
setCookie(prefix + name, value, 90);
};
var old_value = getCookie(prefix + el.name);
if (old_value && old_value != '') {
el.value = old_value;
}
}
}
}
Does anyone have a solution? I would really appreciate it :] Hi I'm banging my head against this problem and I'd really appreciate some help. I think the problem is cause by my lack of understanding of how the browser (firefox 3.6.3) handles focus. A simplified version of my problem is: I've defined the function Code: function two_focus()
{
document.getElementById("two").blur();
alert("hello");
}
then in the body I have the form with two text boxes Code: <input id="one" type="text"><input id="two" type="text" onfocus="two_focus();"> When the page is loaded and I click in the second textbox I get the alert, all well and good. I OK the alert box, but when I click on box 1, or anywhere on the page for that matter, the function is called and the alert comes up. I just don't understand why the focus is being returned to the second box when I click anywhere in the browser window. Any comments will be gratefully received. I'm currently working on a project and I am doing a bunch of image switching. I'm having a problem with the following... I have seven medium image objects and one small one. One is at the top and the other 7 are below. When one of the 7 is clicked, it then becomes the one up top and the one up top then takes the place of the image clicked. This needs to be able to happen no matter which of the seven i click. Also when you click one of the seven it runs a script to change 9 other images in the center of the page. this isnt too important because i have it working already. What i have is, each of the seven images run their function that changes the 9 center images and then it runs another function. What i need is for that function to determine which company for example(shaws, lowes, target) the top image belongs to and replace the image that was clicked with the top one. But i also need to replace the NAME="" and ONCLICK="function()" with the proper ones for the original company up top. Please if you can understand what im trying to do let me know, if you need further clarification i can do so. i can draw a picture of what im trying to do or the layout if needed but i cant necessarily show anyone the project due to a non-disclosure. Is it possible disable an onclick after clicking it and then enable it from another onclick by id Code: <img id="one" href="images/homepage/sliders/bonus_button.jpg" style="position:relative; top:30px; left:50px; height:30px; width:70px; float:left;"> This code runs when it is clicked: Code: $("#one").click(function() {
runEffectB();
return false;
});
What I would like to happen is for either runEffectB() to not run if it was just run or to disable the #one.click once it has run. I am assuming I will be able to re-enable it from another onclick running a similar function. This is jquery and jquery ui if that helps. Any ideas much appreciated. Hey guys, OK, so I have two buttons (code below) that when a user clicks on it, it will place text in a textarea. You can view all the code below: Buttons: Code: <div id="newButton">
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/graphi10.png" alt="Request a Graphic"></a>
<a href="#"><img src="http://i49.servimg.com/u/f49/17/29/94/19/review11.png" alt="Request a Review"</a>
</div>
The textarea ID is: Code: text_editor_textarea and this is the code that I would like to be placed inside the textarea: Code: Nature of Request: Creation Size: Primary Colors: Text To Insert: Donation: Extra Information: URL: I tried this, but the BBCode would not keep it's structure and would all end up on one line. EDIT: Oh...The BBCode is parsing inside the code box >.< Hello... Here is an example of a site I'm working on: http://mrmatthewreese.com/surine/custominlays.php notice the links for the alien cross bones, celtic knot etc...change colors once they are clicked on? Is it possible to have the top (alien crossbone) be set to black before it is clicked on then changed to the grey color once a different link is clicked? Just curious if anyone can help. Here is the javascript code: <script language="JavaScript" type="text/javascript"> /*<![CDATA[*/ var Lst; function CngClass(obj){ if (Lst) Lst.className=''; obj.className='boldlink'; Lst=obj; } /*]]>*/ </script> <a href="#" onclick='changeimage();'><span onclick="CngClass(this);">Alien Crossbones</span></a><br /> <a href="#" onclick='changeimage2()'><span onclick="CngClass(this);">Celtic Knot</span></a><br /> <a href="#" onclick='changeimage3()'><span onclick="CngClass(this);">Compass Rose</span></a><br /> <a href="#" onclick='changeimage4()'><span onclick="CngClass(this);">Fleurdelis</span></a><br /> <a href="#" onclick='changeimage5()'><span onclick="CngClass(this);">Geometrix</span></a><br /> <a href="#" onclick='changeimage6()'><span onclick="CngClass(this);">Modern Vine</span></a><br /> <a href="#" onclick='changeimage7()'><span onclick="CngClass(this);">Nouveau</span></a><br /> <a href="#" onclick='changeimage8()'><span onclick="CngClass(this);">Scorpion</span></a><br /> <a href="#" onclick='changeimage9()'><span onclick="CngClass(this);">Traditional Block</span></a><br /> <a href="#" onclick='changeimage10()'><span onclick="CngClass(this);">TrebleBass Clef</span></a> Hi i have a page that allows the user to enter details and also upload an image , I have onclick event on a submit button that goes off and performs a geocode on the postcode and saves the lat long to a database along with the other details they enter ( which all works fine) . The problem is that when i use the onclick event with the submit button it seems to bypass the onclick JS function and just go straight to the image upload bit. Can a button be a submit button and also have an onclick event or is there anything else i can do to fix the problem? <a href="#" onClick="showClubs(<% Response.Write x_ID_Nanny %>);" > Now this showclubs function shows a hidden div and at the end I have a return:false; but when you click on the link - it still seems to reload to the page and take you to the top how can I get it to just show the div without seeming to reload the page? Hey. When a checkbox is checked, I want it to add the id number of what I've got in a PHP variable, to appear in a <input type="text" />. For example: The id is 1, 2, and 3. So 3 checkbox's. I click on the first, and it adds to another input field, '1'. I hit the second, and the same thing happens, except the id is 2. Of course, I know how to do the ID and all with PHP. All I need to do now, is where when you click a check box, it adds to another field, and adds & after every check. Here is my code: Code: <input type="checkbox" name="delete"
onclick="this.checkedbox.style.display=(this.value=='checked' ? 'inline' : '2' )" />
<input type="text" name="checkedbox" />
Thanks. hi everybody.. i have this simple code: Quote: <html> <head> <script language="javascript" type="text/javascript"> document.write("<input type='button' value='push' onclick='hi()'/>"); function hi() { alert("hi"); document.write("<input type='button' value='enter' onclick='javascript: bye()'/>"); } function bye() { alert("bye"); } </script> </head> <body> </body> </html> if i try to run it on chrom its works well.. but on IE or FireFox its not define the bye() function.. whats the reason?! and how i can solve it?.. thanks very much.. Hello forum, My name is juan and recently started html programming. I have a web page with a drop box with the name of states. Code: <option value="">Alabama</option> <option value="">Alaska</option> I can add a onclick="code here" to the tag so that when the drop box alabama is selected it triggers the onclick event. Im using Ibox in order to have a image of the state open. Code: <a href="images/large/image_1b.jpg" rel="ibox" title="alabama at 1024x450!"><img src="images/small/image_1.jpg" alt=""/></a> the above is a <a> link tag correct? How do I go bout adding the above code into the onclick event? I am attempting to have a link hide and unhide a div It works in Chrome and Firefox, but not in IE The only thing that does not work is when i click it, it dosen't unhide or change the title, so basically, function unHide is not running, although there are no errors thrown. I have this in the top of the page Code:
document.getElementsByClassName = function(className){
var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
var allElements = document.getElementsByTagName("*");
var results = [];
var element;
for (var i = 0; (element = allElements[i]) != null; i++) {
var elementClass = element.className;
if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
results.push(element);
}
return results;
}
function hider(){
var eles = document.getElementsByClassName('hider');
for(var i = 0; i < eles.length; i++){
var theid = eles[i].id;
eles[i].innerHTML = "<div style='display:block; text-decoration:none; color: black; clear:both; text-align:right; float:right; margin-top:-40px; margin-right:3px;' class='open'><a href='#' onClick=\"unHide('" + theid + "'); return false\" > Click To Open </a></div><div class='hides'> " + eles[i].innerHTML + "</div>";
}
}
function unHide(a){
var eles = document.getElementById(a);
str = eles.innerHTML;
if(str.search("> Click To Open <") == -1){
str = str.replace("> Click To Close <", "> Click To Open <");
str = str.replace("class=\"nothides\"", "class=\"hides\"");
}
else{
str = str.replace("> Click To Open <", "> Click To Close <");
str = str.replace("class=\"hides\"", "class=\"nothides\"");
}
eles.innerHTML = str;
}
and i have this where i want it to display and hide the section Code: <h4 onclick="unHide('editB')">Edit This Property</h4>
<div id='editB' class='hider'>
...
</div>
The way it works is that it reads the page for all objects with the class name "hider" then it inserts two divs into "hider", one of them is a title that says: "click to open" and the other div has a class of "hides" that is set to display:none Once "click to open" is clicked, it uses .replace to find "click to open" and class=hide and change them to "Click to Close" and class=nothides if it is clicked again, it does the opposite. i just need to know why it isn't working in IE. Thanks in advance Ok here is my form: Code: $sql = "SELECT storage.quantity, items.name, items.image, items.description, items.itemid
FROM storage
JOIN items USING(itemid)
WHERE userid='".$_SESSION['userid']."'
ORDER BY items.name
LIMIT $offset, $rowsperpage";
$result = mysqli_query($cxn, $sql) or die(mysqli_error($cxn));
$imagecount = 0;
$tableOutput = "";
while ($row = mysqli_fetch_assoc($result)) //while there are still results
{
$imagecount++;
$quantity = $row['quantity'];
$name = $row['name'];
$image = $row['image'];
$description = $row['description'];
$itemid = $row['itemid'];
//Create TD
$tableOutput .= "<tr>\n";
$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">\n";
$tableOutput .= "<img src=\"http://www.elvonica.com/".$image."\"><br>";
$tableOutput .= $name."</td>\n";
$tableOutput .= "<td width=\"400\" style=\"text-align:center;\">".$description."</td>\n";
$tableOutput .= "<td width=\"50\" style=\"text-align:center;\">".$quantity."</td>\n";
$tableOutput .= "<td width=\"100\" style=\"text-align:center;\">\n";
$tableOutput .= "<button type=\"button\" onclick=\"removeOne(".$itemid.")\">Remove 1</button><br />\n";
$tableOutput .= "<button type=\"button\" onclick=\"removeAll(".$itemid.")\">Remove All</button>\n";
$tableOutput .= "</td>\n";
$tableOutput .= "</tr>\n";
}
echo "<form action=\"storageprocess.php\" method=\"get\">\n";
echo "<table cellspacing=\"0\" class=\"news\" align=\"center\">\n";
echo "<tr>\n";
echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Item</b></td>\n";
echo "<td width=\"400\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Description</b></td>\n";
echo "<td width=\"50\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Quantity</b></td>\n";
echo "<td width=\"100\" style=\"text-align:center;background-color:#EEEEEE;\"><b>Remove</b></td>\n";
echo "</tr>\n";
echo $tableOutput;
echo "</table><br />\n";
echo "</form>\n";
Just ignore the PHP part of it. This is going through a while loop as you can see, but the function "removeOne()" and "removeAll()" has the itemid in the parantheses so the javascript can catch that value. But the problem is, that it's not even catching the function. One of the functions (removeOne) looks like this: Code: <script>
$(document).ready(function() {
function removeOne(n)
{
alert("hi");
$.ajax(
{
type: "GET",
url: "storageprocess.php?itemid="+ n,
data: "itemid="+ n,
success: function()
{
alert("Item has been moved to inventory.");
}
});
}
});
</script>
Just ignore the AJAX part. I put the alert("hi"); in the beginning to see if it's even catching the onclick and it's not. So I don't understand why the onclick isn't preparing the function.. Can anyone help me here? Hi all, I'm a js newbie and am filling in for someone on a job. He is dispalying banners on some pages and they want only one of the banners to click thru to a URL ("92002" is the banner id which needs to become a link) existing code is below: ---------------- function showBanner(id) { var arrBanners = new Array("72002", "12003", "63019", "72003", "53052", "83032", "62009", "52006", "73003", "73001", "92002"); for(var i in arrBanners) { if (id == arrBanners[i]) { var output = '<div><img height="130" width="693" border="0" src="/images/banners/banner' + id + '.jpg"/></div>'; document.write(output); return false; } } } ----------------- How do i do this? Many thanks We have a function that validates a form and then does submit (and a bunch of other stuff) We called it using: Code: <td class="MyButtonStyle"> <a href="#" OnClick="MyFunction();" title="Save changes and continue">SAVE</a> </td> This worked fine on the browsers we were using (IE6 in the main), but we now find doesn't work on IE5.01, Mac and some others. OK, so having done some research I now realise I needed RETURN FALSE in OnClick. So ... faced with having to change a lot of pages I'd like to have the best possible syntax (by which I suppose I rellay mean most-browser-compatible), and I've seen a number of options; advice on picking a good'un would be much appreciated. Amongst the stuff I've seen is: Code: 1. href="#" onclick="MyFunction();return false;" 2. href="#null" onclick="MyFunction();return false;" 3. href="NoJavaScriptAbility.htm" onclick="MyFunction();return false;" 4. href="#" onclick="return MyFunction();" 5. href="javascript:;" onclick="return MyFunction();" 6. href="javascript://" onclick="return MyFunction();" 7. href="javascript:void(0);" onclick="return MyFunction();" 8. href="javascript:MyFunction();" What about what shows in the Status bar? Should I have an OnMouseOver event too to describe what MyFunction is going to do? Rather than displaying a meaningless link. Anything else to note? (This function is part of a library being reused for major web site development over the next however many years, and not for single-project build-and-throw-away, so all possible functionality, including The Kitchen Sink!, is up for consideration). Thanks Kristen |
|||||||