Hi Sugato,
you can use the
onkeypress event of the input tag to react to keypresses.
While appending text at the end it would be easy: just cancel the keypress event in case there is already a space at the end of the text field, but since you may also be editing inside an existing text string you better use the
onkeyup event. When the event is fired the text has already been changed. You can now replace multiple spaces with just one space using javascripts Regular Expression feature.
Modification with example:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Test</title>
</head><body>
<form name="Test" action="">
<input type="text" size="30" name="myInput" onkeyup="RemoveSpaces(this);" onkeypress="RememberCaretPos(this);"><br>
<input id="output" type="text" size="30" readonly="readonly" value""/>
<input type="reset">
</form>
<script type="text/javascript">
var inputFieldCaretPos = 0;
var lastCharacterWasGood = true;
function RemoveSpaces(element)
{
var text = element.value;
var changed = text.replace(/[ ]+/g, " ");
if(changed != text)
{
element.value = changed;
SetCaretPosition(element, inputFieldCaretPos);
}
else
{
RememberCaretPos(element);
}
}
function RememberCaretPos(element)
{
var myEvent = window.event;
var keyCode;
var output = document.getElementById("output");
if (myEvent.which)
{
keyCode = myEvent.which;
}
else if (myEvent.keyCode)
{
keyCode = myEvent.keyCode;
}
if (keyCode != 32 || lastCharacterWasGood)
{
inputFieldCaretPos = getSelectionStart(element) + 1;
lastCharacterWasGood = (keyCode != 32);
}
else
lastCharacterWasGood = false;
output.value = inputFieldCaretPos.toString();
}
function getSelectionStart(elem) {
if (elem.createTextRange) {
var r = document.selection.createRange().duplicate()
r.moveEnd('character', elem.value.length)
if (r.text == '')
return elem.value.length
return elem.value.lastIndexOf(r.text)
}
else
{
return elem.selectionStart
}
}
function SetCaretPosition(elem, position)
{
SetRangeSelection(elem, position, position);
}
function SetRangeSelection(element, start, end)
{
if(element.setSelectionRange)
{
element.focus();
element.setSelectionRange(start, end);
}
else if(element.createTextRange)
{
var range = element.createTextRange();
range.collapse(true);
range.moveEnd('character', end);
range.moveStart('character', start);
range.select();
}
}
</script>
</body>
</html>
This example shows how to remember the caret position as it would be set to the end of the text when the input.value is set by javascript code. The code needs to be cleaned up and cross browser compatibility implemented not by "if then", but by using jQuery or PrototypeJS. The example was tested using IE 8, but should also work on FireFox (not tested). I don't advise to use the code in this example in production, it needs to be refactored for usage on more than on input element and for cross browser compatibility.
Anyway it works! :cool:
End of Modification
Regards,
Manfred