Discription:
In this page there are two buttons
One is generated by HTML code, it display as “codedButton”.
Other one is generated by run time using javascript. That display as “vertualButton”.
GenarateBut() function used for that purpose.
insertChar() function used for insert character to the cursor position of the text area.
In that function separately coded for IE and firefox.
We have to give id of the text area and character as arguments of the function.
Above both buttons (vertualButton and codedButton) are calling same function at click event.
Problem:
In IE
When I click codedButton it works very fine.
But if I click virtualButton,
more times it giving unexpected error.
And also in both firefox and IE both cursor is hiding when I click the vertualButton.
Plz help me soon. I have only another three weeks to finish my project
Thank all
Nayana adassuriya
------------------------------web page------------------------------
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0045)http://localhost:1972/13-08-2008/HTMLPage.htm -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>Untitled Page</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<script type=text/javascript>
function GenarateBut(){
key=document.createElement('input');
key.setAttribute('id', 'butMain');
key.setAttribute('type', 'button');
key.setAttribute('value', 'vertualButton');
key.setAttribute('width', 100);
key.onmousedown = function() { checkCursorPosition('tArea','@'); }
document.getElementById('DIV1').appendChild(key);
}
function countChars(text) {
var numOfChar = 0;
for (var i = 0; i < text.length; i++) {
if (text.charAt(i) != '\r') {
numOfChar++;
}
}
return numOfChar;
}
function insertChar(id,myValue) {
var staPos = 0;
var endPos = 0;
var tArea=document.getElementById('tArea');
if (document.selection) { // IE…
tArea.focus();
var range = document.selection.createRange();
var dupRange = range.duplicate();
dupRange.moveToElementText(tArea);
var selText = range.text;
range.text = '|%|';
var index = dupRange.text.indexOf('|%|');
staPos = countChars((index == -1) ? dupRange.text : dupRange.text.substring(0, index));
endPos = countChars(selText) + staPos;
range.moveStart('character', -3);
range.text = myValue;
//set cursor position
var sel = tArea.createTextRange();
sel.collapse(true);
sel.moveStart('character', staPos+myValue.length);
sel.moveEnd('character', 0);
sel.select();
} else if (tArea.selectionStart || (tArea.selectionStart == '0')) { // Mozilla/Netscape…
staPos = tArea.selectionStart;
endPos = tArea.selectionEnd;
tArea.value = tArea.value.substring(0, staPos)+ myValue+ tArea.value.substring(endPos, tArea.value.length);
tArea.selectionStart = (staPos+myValue.length);
tArea.selectionEnd = (staPos+myValue.length);
}
tArea.focus();
}
</script>
<style type=text/css>
body {
font-size: 1em; font-family: verdana, helvetica, arial, sans-serif; background-color: #4a88be;
}
textarea {
left: 250px; overflow: auto; width: 500px; font-family: "iskoola pota"; position: absolute; top: 30px; height: 100px;
}
#div1 {
left: 400px; width: 50px; position: absolute; top: 600px; height: 50px; background-color: #000000;
}
#butmain {
left: 20px; width: 200px; position: absolute; top: 20px; height: 50px; background-color: #ffffff;
}
</style>
</head>
<body onload="genarateBut()">
<textarea id=tarea name=textarea></textarea>
<div id=div1 style="left: 247px; width: 507px; top: 285px; height: 167px">
<input type="submit" name="submit" value="codedButton" onclick="javascript:insertChar('tarea','@')" style="position:absolute; left: 200px; width: 200px; top: 100px; height: 50px">
</div>
</body>
</html>
Before you post, read our: 
