function getSize() {
var divNitinz = document.getElementById('divNitinz');
var txtName = document.getElementById('txtName');
divNitinz.style.display = 'inline';
divNitinz.innerHTML = txtName.value;
var txtWidth = divNitinz.offsetWidth;
divNitinz.style.display = 'none';
return txtWidth;
}
I then created another function to get this value and compare it with the DIV in which I wanted to display the text and that looks like this:
function checkSize() {
var divDisplay = document.getElementById('divDisplay');
var txtName = document.getElementById('txtName');
if (divDisplay.offsetWidth <>
alert('Text overflow');
divDisplay.innerHTML = 'Text width: ' + getSize() + ' Display width: ' + divDisplay.offsetWidth;
} else {
divDisplay.innerHTML = txtName.value;
window.status = 'Text width: ' + getSize() + ' Display width: ' + divDisplay.offsetWidth;
}
}
My HTML is pretty simple:
<form>
<input type="text" name="txtName" id="txtName" onkeyup="checkSize();" />
<input type="text" name="txtName" id="txtName" onkeyup="checkSize();" />
<span id="divNitinz" style="display: none;"></span>
<div id="divDisplay" style="width: 120px; background-color: #FFFF99;"></div>
<input type="button" onclick="checkSize();" value="check" name="btnCheck" />
</form>
If you've got any enhancements to this script or a better way to do detect overflow, let me know and I'll post it up here.
4 comments:
onkeyup is the event you want that fires for every key press and after which you don't have to setTimeout to get the new value of the field.
Are you sure you want to set innerHTML to unsanitized text content? What if someone puts angle brackets in there? You could even open yourself up to XSS attacks.
@phyzome
Thanks for your comment.
I agree - innerHTML does pose a security risk. The first thing I do whenever I see a CMS that allows HTML input is to try and insert a script.
For this example, I would've used innerText instead but that's IE-specific and has the textContent equivalent in Firefox. Instead of adding more code for determining which browser the user is running, I thought it would be best to just use innerHTML, which is common to both Firefox & IE, to make the example simpler.
@midnightmonster
Thanks for the tip - I'll make sure I incorporate it into future examples.
I haven't been doing much Javascript-ing lately so it took me a while to figure out which key event to use. On looking at the event names, onkeypress seemed like the appropriate one but I then realised it doesn't fire on backspace. I then went for onkeydown and the rest is history.
I'll add that to the post so other readers go with onkeyup instead of onkeydown.
Post a Comment