A Onfocus Element.blur Behavior
Mar 11, 2003
i'm sure its been thought of before and i'm sure this is just gunna piss off the people who like to tab through their pages, but i just made a little behavior component file that stops any links from gaining focus on your page.
put this is the style section of your page.
<style type="text/css">
a { behavior: url("hidefocus.htc"); }
</style>
then put the attached file in the same dir. (hidefocus.htc) this is all it is
<public:component>
<public:attach event="onfocus" handler="blurry" />
<script>
function blurry() {
element.blur();
}
</script>
</public:component>
Note: since this behavior is stored in an external file, sometimes one instance of link focus can occur before the htc file can be loaded. if anyone has any tips on fixing that i'd like to hear'em.
View 16 Replies
ADVERTISEMENT
Jan 9, 2010
im trying to implement a login screen similar to Facebook. What i mean by this is i want the username and password fields to have text in them until the user selects the textfield. If the user does not type anything in the textfield the the onblur will automatically change it back, but if the user has typed something in then i want the text to be left alone.At the moment the onblur always changes the value of the textfield. Im not sure how to solve this.(code i am using is below)
Code:
<input name='username' type='text' size="10" value="username" onfocus="this.value=''" onblur="this.value='username'"/>
[code]....
View 2 Replies
View Related
Sep 22, 2005
I've got a default value of some text in an input element when a page loads.
What I'd like to do is have the value disappear when the user clicks in the
input field.
I've figured out I can use:
onclick="this.value=''"
This works fine, however if for some reason the user adds his own input,
then click somewhere else/clicks back, the text has once again been erased.
So I thought of a function like the following, however it does not work:
function removeinput(x) {
if (x == 'Enter items not on standard list here...') {
x = ''
}
}
onclick="removeinput(this.value);"
I've also tried placing this.value inside of single quotes to no avail.
View 5 Replies
View Related
Mar 20, 2011
I want to handle focus and blur events on any DIV element but don't know how? I tried this one:
$('.myDIV').bind('focus',function(event){
// something
});
But it doesn't work!
View 2 Replies
View Related
Jul 23, 2005
Here is the layout of my form from left to right, from top to down.
- buttonA, buttonB, buttonC
- textbox, textbox, textbox
- buttonXXX
After the user types in the textboxes and press enter (with the cursor still
in one of the textboxes), buttonXXX should be pressed by default.(the user
is too lazy to take the cursor over to buttonXXX and click).
The problem is the top/left most button (button A) gets pressed which annoys
them to death. So I tried to do this.
In the bottonA's onfocus event handle-
document.forms[0].elements['buttonXXX'].focus() .
Result: ButtonXXX receives focus alright, but the code for buttonA still
executes!
View 1 Replies
View Related
Jul 23, 2005
For those who have been using Outlook Express, you must be pretty used to
the fact that whenever you focus on the preview section, the header for the
preview turns from grey to blue, while the text turns from black to white.
Code:
View 3 Replies
View Related
Jul 20, 2005
I'm fairly new to this and my code is as follows...
<script language="JavaScript>
var oldValue
function focusElement(theElement) {
oldValue = theElement.value;
return;
}
</script>
Then in the HTML, I have
<select size="1" id="ConfCommentSELECT" name="ConfCommentSELECT"
onfocus="return focusPrecedence(this);">
<option value="0"> - </option>
<option value="1">1</option>
<option value="2">2</option>
</select>
The <select> is with a <form><tr><td>, but I don't see how that would make a
difference. I started using the onchange="return blah-blah-blah(this);" and
that worked so I copied that to the onfocus. What I want to do is to
remember the value of the contents of the <select> before the user changes
it, and compare it to the new value.
View 2 Replies
View Related
Apr 22, 2003
This HTML and CSS:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>onfocus tooltips</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
<!--
div.tooltip,div.heretooltip {
font:0.7em verdana,helvetica,arial,sans-serif;
border:1px solid #000;
background-color:#ffffe1;
color:#000;
padding:2px 4px 2px 4px;
text-align:left;
filter:progid:DXImageTransform.Microsoft.Shadow(color=#666666,direction=135,strength=1);
position:absolute;
width:auto;
height:auto;
}
div.heretooltip {
border:1px solid #003;
background-color:#fefefe;
color:#003;
}
-->
</style>
</head>
<body>
<script type="text/javascript" src="tooltips.js"></script>
<p>Use the TAB and Shift-TAB keys to navigate this list.</p>
<ul>
<li><a href="/" title="Home Page" tabindex="10">Home</a>
<ul>
<li><a href="/sitemap.php" title="A guide to the areas of this website" tabindex="20">Sitemap</a></li>
<li><a href="/preferences.php" title="Change the design scheme and functionality" tabindex="30">Preferences</a></li>
<li><a href="/brothercake.php" title="About this site and its webmaster :)" tabindex="40">About brothercake</a></li>
</ul>
</li>
</ul>
</body></html>
And this in tooltips.js
// global vars
var i, pos, obj, tempObj, tempEle, winSize, extent, scrollHeight;
//toolTip object
var toolTip = null;
var toolTipParent = null;
//find object position
function getRealPos(ele,dir)
{
(dir=="x") ? pos = ele.offsetLeft : pos = ele.offsetTop;
tempEle = ele.offsetParent;
while(tempEle != null)
{
pos += (dir=="x") ? tempEle.offsetLeft : tempEle.offsetTop;
tempEle = tempEle.offsetParent;
}
return pos;
}
//delay timer
var goTip = false;
var goTimer = null;
function focusTimer(e)
{
//second loop
if(goTimer != null)
{
//clear timer
clearInterval(goTimer);
goTimer = null;
//pass object to create tooltip
focusTip(e);
}
//first loop
else
{
//get focussed object
(e) ? obj = e.target : obj = event.srcElement;
//pass object back through timer
tempObj = obj;
//set interval
goTimer = setInterval('focusTimer(tempObj)',400);
}
}
//create tooltip
function focusTip(obj)
{
//remove any existing tooltip
blurTip();
//if tooltip is null
if(toolTip == null)
{
//get window dimensions
if(typeof window.innerWidth!="undefined")
{
winSize = {
x : window.innerWidth,
y : window.innerHeight
};
}
else if(typeof document.documentElement.offsetWidth!="undefined")
{
winSize = {
x : document.documentElement.offsetWidth,
y : document.documentElement.offsetHeight
};
}
else
{
winSize = {
x : document.body.offsetWidth,
y : document.body.offsetHeight
};
}
//create toolTip
toolTip = document.createElement('div');
//add classname
toolTip.setAttribute('class','');
toolTip.className = (obj.className == 'youAreHere') ? 'heretooltip' : 'tooltip'
//get focussed object co-ordinates
if(toolTipParent == null)
{
toolTipParent = {
x : getRealPos(obj,'x') - 3,
y : getRealPos(obj,'y') + 2
};
}
// offset tooltip from object
toolTipParent.y += obj.offsetHeight;
//apply tooltip position
toolTip.style.left = toolTipParent.x + 'px'
toolTip.style.top = toolTipParent.y + 'px'
//write in title attribute (with 'you are here' string)
toolTip.innerHTML = (obj.className == 'youAreHere') ? obj.title + ' <b>[You Are Here]</b>' : obj.title;
//add to document
document.body.appendChild(toolTip);
//restrict width
if(toolTip.offsetWidth > 300)
{
toolTip.style.width = âÆpx'
}
//get tooltip extent
extent = {
x : toolTip.offsetWidth,
y : toolTip.offsetHeight
};
//if tooltip exceeds window width
if((toolTipParent.x + extent.x) >= winSize.x)
{
//shift tooltip left
toolTipParent.x -= extent.x;
toolTip.style.left = toolTipParent.x + 'px'
}
//get scroll height
if(typeof window.pageYOffset!="undefined")
{
scrollHeight = window.pageYOffset;
}
else if(typeof document.documentElement.scrollTop!="undefined")
{
scrollHeight = document.documentElement.scrollTop;
}
else
{
scrollHeight = document.body.scrollTop;
}
//if tooltip exceeds window height
if((toolTipParent.y + extent.y) >= (winSize.y + scrollHeight))
{
//shift tooltip up
toolTipParent.y -= (extent.y+obj.offsetHeight+4);
toolTip.style.top = toolTipParent.y + 'px'
}
}
}
function blurTip()
{
//if tooltip exists
if(toolTip != null)
{
//remove and nullify tooltip
document.body.removeChild(toolTip);
toolTip = null;
toolTipParent = null;
}
//cancel timer
clearInterval(goTimer);
goTimer = null;
}
window.onload = function()
{
if(typeof document.getElementsByTagName!="undefined")
{
//get tags collection
var allTags = document.getElementsByTagName('*');
var allTagsLen = allTags.length;
for (var i=0;i<allTagsLen;i++)
{
//if tag has title attribute
if(allTags[i].title)
{
//attach event
allTags[i].onfocus = focusTimer;
allTags[i].onblur = blurTip;
allTags[i].onmouseover = blurTip;
}
}
}
}
View 21 Replies
View Related
Mar 9, 2005
1. How to reset textbox + textarea?
2. How to make the "function getKeyValue_h(chr)" work without the submit button? (on pasting in textarea it should automatically give the calculated result in the textbox.)
View 3 Replies
View Related
Jul 23, 2005
I've got a div, and it has an onMouseOver handler attached to it which makes a second div visible. The second div shares part of one side with the first, but not all.
The first div also has an onMouseOut handler which, you guessed it, makes the second div invisible.
However, if the user rolls out of the first div and into the second, I'd like to keep the second div visible. Any ideas how to accomplish this?
View 5 Replies
View Related
Oct 8, 2005
I'm developing a website where a visistor does not have to use the mouse.
All he has to do is use the Tab-key or key-combinations to jump to specific
hyperlinks (containing accesskeys). Next, he presses the Enter key to follow the hyperlink.
My question is: is it possible to change color of the hyperlink when a
hyperlink get the focus. I do not only want to see the dotted line, I want the hyperlink to lighten up.
View 11 Replies
View Related
Jun 27, 2009
My question is regarding the behavior of Supersubs in IE6. It seems to adjust to the correct width, but, it applies the new width to all of
the parent UL's of the widest LI. In IE7 and FF the new width is only applied to the containing UL of the LI.
View 1 Replies
View Related
Sep 13, 2011
My code works perfectly inside DreamWeaver but is crazy in both IE8 and FireFox.
In FireFox, I cannot insert text in the text fields.
In IE8, I can insert text, but nothing else happens.
My code is as follows:
Code:
<script language="JavaScript">
<!--
var Counter;
[Code].....
View 5 Replies
View Related
Jul 23, 2005
Is there a way, besides writing another method, to make Date.setMonth() do something more useful than nothing when the month in question creates an invalid date? If I try
d=new Date();
d.setMonth( 1 );
today, I'd really like to get some kind of an error rather than silent failure.
View 5 Replies
View Related
Nov 30, 2005
I have a table that changes its cell (input text) colors when their contents
have changed (actually on keypress) and shows a couple of buttons
automatically, UDPATE and CANCEL. This works partially, though detecting
enter and escape doesn't seem to work, or parhaps calling the button click
events directly doesn't (see below).
In addition to getting the ENTER and ESC keypresses to fire their
appropriate button clicks, I need to be able to collect information on which
cells have changed, so on the page loading again I can read this
information, perhaps from a hidden field, to use to update a database
server-side.
<script language=javascript>
function GirdTextKeyPress(txtID, btnsContainerlID, btnUpdateID, btnCancelID)
{
var txt = document.getElementById(txtID);
txt.className = 'GridChanged'
var bc = document.getElementById(btnsContainerlID);
bc.style.display = 'inline'
var btnUpdate = document.getElementById(btnsContainerlID);
if (event.keyCode == 13)
{
event.returnValue=false;
event.cancelBubble = true;
btnUpdate.click();
}
var btnCancel = document.getElementById(btnCancelID)
if (event.keyCode == 61)
{
event.returnValue=false;
event.cancelBubble = true;
btnCancel.click();
}
}
</script>
<style>
Input.Grid
{
border-style:none;
}
Input.GridChanged
{
background-Color:Yellow
}
</style>
View 1 Replies
View Related
Aug 3, 2006
Normally, a button like <input type="image"is also a submit button.
Is there any way to override that so that it has an onclick event but
does not submit the form?
For what I'm trying to do, I cannot use an <imgelement with onclick.
I have to use a form element (and I'd rather have an image than a
button)
View 3 Replies
View Related
Oct 29, 2006
I coudn't understand some behavior of RegExp.test function.
Example html code:
----------------
<html><head></head><body><script type="text/javascript">
var r = /^https?:///g;
document.write( [
r.test('http://a'),
r.test('http://b'),
r.test('http://c'),
r.test('http://d')
]);
</script></body></html>
---------------------
The page displays true, false, true, false. (in Opera, Firefox and IE)
This is strange because I expected it would display true, true, true,
true. There must be something I didn't know about the function
RegExp.test.
View 11 Replies
View Related
Jul 20, 2005
I used the following script to allow me to bring up a list of events
for a given year by simply hovering the mouse over the filename. As
follows --
<script Language="JavaScript">
function winopen1(){
msg1=open
("","WINDOW1","toolbar=no,location=no,directories=no,status=no,me nubar=no,scrollbars=no,resizable=no,copyhistory=no ,width=550,height=200");
msg1.location="1989H.htm"}
</Script>
Then....
<a href="1989H.htm" onMouseOver="winopen1();return true;"
onMouseOut="msg1.close();return true;">1989</a></font></td>
This is one example .... this is repeated about 20 times in the
program, one for each year of our history...
It works fine ... but not on all the browsers in our office. Most work
fine ... others (all IE) work fine on some dates; other dates, when
you hover, flash a blank page repeatedly until you move the mouse
away; almost as though it is looping ...
I notice that "about:blank" flashes briefly before the called page
comes up ... but that appears to be normal.... I have checked and
rechecked all coding, all brackets and semi-colons ... and it works
perfectly -- for me and for a few others.
View 1 Replies
View Related
Jul 20, 2005
I expect to see "foo" for the 2nd alert. Instead, the value of select is
cleared. Am I missing something?
<html>
<head><title>Foo</title>
<script language="javascript">
<!--
function foo()
{
alert('Before change: ' + document.control.titleFont.value);
document.control.titleFont.value = 'foo'
alert('After change: ' + document.control.titleFont.value);
}
-->
</script>
</head>
<body>
<form name="control" method="POST">
<select name="titleFont">
<option value="sans-serif">Arial</option>
<option value="serif">Times</option>
</select>
<input type="submit" name="control" value="Submit" onclick="return
foo()"/>
</form>
</body>
</html>
View 1 Replies
View Related
Jul 20, 2005
I've been working with a page that should act as a 'jump page' before
loading a PDF and when I use the location.replace function to replace
the jump page with the resulting PDF, both the jump page and the pdf
show up into the browser history (in IE only) leading to the dreaded
back-button loop. Code:
View 1 Replies
View Related
Jul 20, 2005
I want to call a JS function when Enter is pressed inside the form, and when the submit button is clicked I want to submit the form. Any simple way for doing this?
View 1 Replies
View Related
Aug 31, 2009
Setting the min to 0 will dispaly all the optins if the user clicks the field a 2nd time. However, i'd like the options to display once the input has focus, or using a button. How can I do that?
View 1 Replies
View Related
May 8, 2009
I'm trying to use javascript to control a table's td styles. What I want to achieve is to
- apply style A onmouseover
- apply style B onmouseout
- apply style A onfocus
The problem is that the mouseout event overrides the focus event. Also I'd like each element to stay on the focus state until another element gets clicked.
This is my code:
<script language="javascript" type="text/javascript">
function HoverStyle(element) {
document.getElementById(element).style.backgroundImage = "url(images/arrow1.jpg)";
[code].....
View 2 Replies
View Related
Jun 9, 2010
I am trying to get a text field to increase in size (one time to a predetermined size) when user clicks in the text field.
Here is the code that for some reason isn't working for me.
View 1 Replies
View Related
Sep 15, 2011
Can we have two onFocus javascriptscript events for single HTML Tag?
View 1 Replies
View Related
Aug 19, 2006
In my UI framework, I have an event handler - just like many frameworks do. My handler is a static object, and contains methods to take care of things like mouse events, etc. However, upon adding a method to handle onfocus today, I ran into a very odd problem in Firefox. I've put together an example page that generates the error:
View 14 Replies
View Related
