Question about javascript and HTML

Factual Questions
1

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.

2

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 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.

3

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.

4

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 ?

5

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.

6

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.

7

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.)

8

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.

9

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.)

10

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)



<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.

11

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.

12

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

13

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.