# Question about javascript and HTML

**URL:** <https://boards.straightdope.com/t/question-about-javascript-and-html/657641>\
**Category:** Factual Questions\
**Created:** [May 6, 2013, 7:16pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641 "2013-05-06T19:16:55Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![tdn](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tdn](https://boards.straightdope.com/u/tdn)\
**Post date:** [May 6, 2013, 7:16pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/1 "2013-05-06T19:16:55Z")

</div>

I can’t seem to find anything in Google about this.

In HTML:

\<INPUT maxLength=6 name=WtCurrLb size=6 onBlur=“calculateBMI(‘cwlb’);”\>(lb)

In Javascript: (This is in the calculateBMI function that I have written)

document.form1.WtCurrLb.value = 123;

If I set the value like in that last line of code, then click in the textbox, the cursor automatically goes after the 3, then half a second later jumps to before the 1. It is definitely that line of code that is causing that behavior, which makes working with the page a huge PITA and is causing data errors.

Any ideas why this is happening? FWIW, this is happening in IE.

---

<div class="post-metadata">

**Author:** ![Deegeea](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Deegeea](https://boards.straightdope.com/u/Deegeea)\
**Post date:** [May 6, 2013, 7:29pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/2 "2013-05-06T19:29:24Z")

</div>

as best I can see from the meaning of “onBlur” what you are asking it to do is…  
'when the WtCurrLb field loses focus, set its value to 123"  
When you click on the textbox (by which I assume you mean the WtCurrLb textbox) the onBlur event shouldn’t even be triggered. So something else is going on.

Here [javascript - onfocus & onblur not working in IE - Stack Overflow](http://stackoverflow.com/questions/1477757/onfocus-onblur-not-working-in-ie) I see that someone having a similar problem traced it to a js library they were importing. A library could change the IE behavior of onBlur enough to cause this issue, for example.

---

<div class="post-metadata">

**Author:** ![tdn](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tdn](https://boards.straightdope.com/u/tdn)\
**Post date:** [May 6, 2013, 7:44pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/3 "2013-05-06T19:44:58Z")

</div>

> [@Deegeea](#):
>
> as best I can see from the meaning of “onBlur” what you are asking it to do is…  
> 'when the WtCurrLb field loses focus, set its value to 123"  
> When you click on the textbox (by which I assume you mean the WtCurrLb textbox) the onBlur event shouldn’t even be triggered. So something else is going on.

That’s half correct. I’m actually calling the function from 4 different textboxes. So I also have a textbox called WtCurrKg. If I’m in WtCurrKg then click on WtCurrLb, then the OnBlur from WtCurrKg is invoked, causing this behavior. If I get there from some other input without the OnBlur, the behavior doesn’t happen.

---

<div class="post-metadata">

**Author:** ![Deegeea](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Deegeea](https://boards.straightdope.com/u/Deegeea)\
**Post date:** [May 6, 2013, 8:53pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/4 "2013-05-06T20:53:18Z")

</div>

So if you have three boxes, WtCurrKg - WtCurrLb - Height, and you have WtCurrKg set so that onBlur/losing focus, it sets WtCurrLb to the equivalent in lbs, what you want to happen is that if you type a weight into WtCurrKg, then click Height, a new value appears in WtCurrLb (say in this case they put 56 in WtCurrKg so the value is 123 that should go into WtCurrLb). So what happens is that instead of the focus going to Height as the click directed, the focus jumps to WtCurrLb to after the 3, then a moment later to before the 1 ?

---

<div class="post-metadata">

**Author:** ![tdn](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tdn](https://boards.straightdope.com/u/tdn)\
**Post date:** [May 7, 2013, 1:31pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/5 "2013-05-07T13:31:01Z")

</div>

> [@Deegeea](#):
>
> So if you have three boxes, WtCurrKg - WtCurrLb - Height, and you have WtCurrKg set so that onBlur/losing focus, it sets WtCurrLb to the equivalent in lbs, what you want to happen is that if you type a weight into WtCurrKg, then click Height, a new value appears in WtCurrLb (say in this case they put 56 in WtCurrKg so the value is 123 that should go into WtCurrLb). So what happens is that instead of the focus going to Height as the click directed, the focus jumps to WtCurrLb to after the 3, then a moment later to before the 1 ?

Almost.

In that scenario, focus would go to Height, as expected. But the cursor goes to the end of height, then snaps to the beginning. So if the height is 72, it would look like this: 72| then this: |72. So focus goes to the right box, it’s just the cursor that’s acting funny.

And all 3 boxes (actually, 4) have the same OnBlur event, which just goes to a function with a decision tree.

---

<div class="post-metadata">

**Author:** ![geneb](https://avatars.discourse-cdn.com/v4/letter/g/a88e4f/32.png) [@geneb](https://boards.straightdope.com/u/geneb)\
**Post date:** [May 7, 2013, 1:58pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/6 "2013-05-07T13:58:06Z")

</div>

This is a bug in IE8. You should be able to add some JS to set the location of the cursor, but with the method you are using I think it will be troublesome. What is your end goal and what requirements can you not budge on? Maybe we can help you come up with a more effective cross-browser compatible approach.

---

<div class="post-metadata">

**Author:** ![tdn](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tdn](https://boards.straightdope.com/u/tdn)\
**Post date:** [May 7, 2013, 3:00pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/7 "2013-05-07T15:00:02Z")

</div>

Thanks for letting me know it’s a bug. Knowing this, I was able to find a few references to it on the web.

Here’s the scope of the issue:

We have two nearly identical forms where a patient’s health issues can be listed. One is external, for patients to fill out at home, the other is internal for physicians to fill out. The internal one must be used with IE.

This particular section has 5 textboxes and a button. The textboxes are:

Weight in pounds  
Weight in kilograms  
Height in inches  
Height in centimeters  
BMI

BMI is read only. When any of the first four is exited, the others will be calculated, if possible. The button doesn’t actually do anything but entice the user to click on something else, triggering an OnBlur.

I suppose I could get rid of the OnBlur and have the button call the code. The bahavior would still exist but hopefully the user wouldn’t have any reason to go back. And if the button is not clicked, the submit button could invoke the code. (All that’s saved is the metric values.)

---

<div class="post-metadata">

**Author:** ![TriPolar](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tripolar/32/3008_2.png) [@TriPolar](https://boards.straightdope.com/u/TriPolar)\
**Post date:** [May 7, 2013, 3:08pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/8 "2013-05-07T15:08:29Z")

</div>

Sorry, but I’m missing why this is a problem. It’s just an out of place cursor in a small read-only field, or is there something else? Anyway, problems like this abound in JS, choose your work-around and move on, you’ll have plenty of other problems to resolve.

ETA: Ok, now I see this was not a read-only field that was the problem. Hmm. I may have run into something like this before. I’ll try to recollect and get back to this.

---

<div class="post-metadata">

**Author:** ![tdn](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tdn](https://boards.straightdope.com/u/tdn)\
**Post date:** [May 7, 2013, 3:17pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/9 "2013-05-07T15:17:39Z")

</div>

It’s a problem because there are a lot of typos, and I see the pained expression on users’ faces when they have to go back and type it again. I want to make using this form as painless as possible. And some typos get through. Last week I found a record for a 40 foot tall woman. (With a BMI of something like 1.8.)

---

<div class="post-metadata">

**Author:** ![geneb](https://avatars.discourse-cdn.com/v4/letter/g/a88e4f/32.png) [@geneb](https://boards.straightdope.com/u/geneb)\
**Post date:** [May 7, 2013, 4:32pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/10 "2013-05-07T16:32:02Z")

</div>

Will this work for you? (I’m sure it can be cleaned up and optimized… This is a just quick back of a napkin code)

```auto

<html>
<head>
	<script type="text/javascript">
		function calculate(control)
		{
			var WtLb = document.getElementById('WeightLB');
			var WtKg = document.getElementById('WeightKG');
			var HtIn = document.getElementById('HeightIN');
			var HtCm = document.getElementById('HeightCM');
			var BMI = document.getElementById('BMI');
			
			switch(control.id)
			{
				case 'WeightKG':
					var lb = (WtKg.value * 2.20462262).toFixed(2);
					if(WtLb.value != lb)
						WtLb.value = lb;
					break;
				case 'WeightLB':
					var kg = (WtLb.value * 0.45359237).toFixed(2);
					if(WtKg.value != kg)
						WtKg.value = kg;
					break;
				case 'HeightCM':
					var inch = (HtCm.value * 0.3937007874).toFixed(2);
					if(HtIn.value != inch)
						HtIn.value = inch;
					break;
				case 'HeightIN':
					var cm = (HtIn.value * 2.54).toFixed(2);
					if(HtCm.value != cm)
						HtCm.value = cm;
					break;
			}
			
			var HtM = HtCm.value/100;
			var BMIVal = (WtKg.value / Math.pow(HtM, 2)).toFixed(2);
			
			if(!isNaN(BMIVal) && BMIVal != Number.POSITIVE_INFINITY)
				BMI.value = BMIVal;
		}
	</script>
</head>
<body>
	<form>
		Weight: 
		<INPUT type="text" maxLength="6" id="WeightKG" size="6" onBlur="calculate(this);" onFocus="this.select()" value="0">(KG)
		<INPUT type="text" maxLength="6" id="WeightLB" size="6" onBlur="calculate(this);" onFocus="this.select()" value="0">(LB)
		<br /><br />
		Height: 
		<INPUT type="text" maxLength="6" id="HeightCM" size="6" onBlur="calculate(this);" onFocus="this.select()" value="0">(CM)
		<INPUT type="text" maxLength="6" id="HeightIN" size="6" onBlur="calculate(this);" onFocus="this.select()" value="0">(IN)
		<br /><br />
		BMI: 
		<INPUT type="text" maxLength="6" id="BMI" size="6" disabled="true" value="0">
		<INPUT type="button" id="CalcBMI" value="Calculate" onClick="calculate(this);">
	</form>
</body>
</html>

```

Essentially, it will highlight the text in the textbox when the box gets focus… No cursor issues in this case.

---

<div class="post-metadata">

**Author:** ![tdn](https://avatars.discourse-cdn.com/v4/letter/t/94ad74/32.png) [@tdn](https://boards.straightdope.com/u/tdn)\
**Post date:** [May 7, 2013, 5:11pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/11 "2013-05-07T17:11:10Z")

</div>

this.select(). Bloody brilliant! Thank you!

And thanks for taking the trouble to write all of the code. It’s eerily similar to what I already had.

---

<div class="post-metadata">

**Author:** ![Deegeea](https://avatars.discourse-cdn.com/v4/letter/d/e9bcb4/32.png) [@Deegeea](https://boards.straightdope.com/u/Deegeea)\
**Post date:** [May 7, 2013, 6:40pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/12 "2013-05-07T18:40:30Z")

</div>

Very clever solution, I am sure I will someday find it useful 🙂

---

<div class="post-metadata">

**Author:** ![TriPolar](https://sea3.discourse-cdn.com/straightdope/user_avatar/boards.straightdope.com/tripolar/32/3008_2.png) [@TriPolar](https://boards.straightdope.com/u/TriPolar)\
**Post date:** [May 7, 2013, 6:50pm UTC](https://boards.straightdope.com/t/question-about-javascript-and-html/657641/13 "2013-05-07T18:50:05Z")

</div>

Very good solution **geneb**. I hate browser programming because of this kind of weirdness, but I think I’ll add the onFocus=“this.select()” to every input component when I have to do it.
