|
JavaScript - Keeping Textarea Cursor Within Display Area
This is just a goofy little project to add to my learning,
but I've come across a problem that would be nice to solve. It is not a TinyMCE or other JS editor replacement, just something to play with for the holidays! In the following program, you can create an HTML template then add/modify common elements and display the results. I can place tags around highlighted areas and insert/append functions where the cursor is positioned. Works OK so far. The problem is when the text exceeds the <textarea> boundaries and I try to tag or insert at cursor, the display reverts to the first line of the <textarea> display. I would like to keep the displayed area within the boundaries and just push down the inserted text. Problem: Is there a simple way to accomplish this task or do I just have to put-up with the bouncy display whenever I insert code into the area? Code: <html>
<head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Simple JS Editor</title>
<!--
One annoyance: When <textarea> content exceeds size of element
additional entries cause display to JUMP to beginning
of the area being edited.
-->
<style type="text/css">
.tags { background-Color:lightblue; }
.objs { background-Color:pink; }
.ctrl { background-Color:lime; }
</style>
<script type="text/javascript" language="javascript"> <!-- External: src="InsertText.js"></script -->
// function insertAtCursor(myField, myValue) {
function InsertText(myField, myValue) {
//IE support
if (document.selection) {
myField.focus();
sel = document.selection.createRange();
sel.text = myValue;
}
//MOZILLA/NETSCAPE support
else if (myField.selectionStart || myField.selectionStart == '0') {
// else if (myField.selectionStart != 'undefined') {
var startPos = myField.selectionStart;
var endPos = myField.selectionEnd;
myField.value = myField.value.substring(0, startPos) + myValue + myField.value.substring(endPos, myField.value.length);
myField.selectionStart = startPos + myValue.length;
myField.selectionEnd = startPos + myValue.length;
} else { myField.value += myValue; }
myField.focus(); // new entry here
}
// calling the function
// insertAtCursor(document.formName.fieldName, value);
</script>
<script type="text/javascript"> <!-- External: src="InsertCode.js"></script -->
// Modified from:
// http://www.codingforums.com/showthread.php?t=134113 - Author Kor
// http://www.codingforums.com/showthread.php?t=182713
var HTMLstart = ['<!DOC HTML>',
'<html>','<head>','<title> Untitled </title','',
'<style type="text\/css"><\/style>','',
'<script type="text\/javascript">',
' function $_(IDS) { return document.getElementById(IDS); }',
'<\/script>','',
'</head>','<body>','','<h1> Test </h1><hr>','',
'</body>','</html>'
];
var RBtnStart = ['<input type="radio" name="RBtn" value="0">RBtn 1',
'<input type="radio" id="RBtn" name="RBtn" value="1">RBtn 2',
'<input type="radio" id="RBtn" name="RBtn" value="2">RBtn 3',''
];
var CBoxStart = ['<input type="checkbox" id="CBox0" name="CBox0" value="A">CBox A',
'<input type="checkbox" id="CBox1" name="CBox1" value="B">CBox B',''
];
var SBoxStart = ['<select id="SBox" name="SBox">',' <option value="">Pick</option>',
' <option value="1">1</option>',' <option value="2">2</option>',
' <option value="3">3</option>',' <option value="4">4</option>',
' <option value="5">5</option>',' <option value="6">6</option>',
'</select>',''
];
var TblsStart = ['<table border="1">','<caption> Table </caption',
' <tr>',' <td> 1 </td>',' <td> 2 </td>',' </tr>',
' <tr>',' <td> 3 </td>',' <td> 4 </td>',' </tr>',
'</table>',''
];
var ULstart = ['<ul>',' <li> 1 </li>',' <li> 2 </li>',' <li> 3 </li>','</ul>',''];
var OLstart = ['<ol>',' <li> A </li>',' <li> B </li>',' <li> C </li>','</ol>',''];
var DLstart = ['<dl>',' <dt> A </dt>',' <dt> B </dt>',' <dt> C </dt>','</dl>',''];
function formatText(el,tag){
var selectedText = document.selection
?document.selection.createRange().text
:el.value.substring(el.selectionStart,el.selectionEnd); // IE:Moz
if (selectedText == "") {return false}
var newText='<'+tag+'>'+selectedText+'</'+tag+'>';
if(document.selection) { document.selection.createRange().text=newText; } // IE
else { // Moz
el.value=el.value.substring(0,el.selectionStart)+newText+el.value.substring(el.selectionEnd,el.value.length);
}
}
</script>
</head>
<body>
<form name="myForm" onsubmit="return false">
<textarea id="myTextarea" name="myTextarea" rows="18" cols="80"
style="font-family: monospace; font-size: 12pt; float: left;"></textarea>
<div style="float: left;"><h3 class="tags">Enclose (highlighted)</h3>
<input class="tags" value="Bold" onclick="formatText (myTextarea,'b');" type="button">
<input class="tags" value="Italic" onclick="formatText (myTextarea,'i');" type="button">
<input class="tags" value="Underline" onclick="formatText (myTextarea,'u');" type="button">
<br>
<input class="tags" value="h1" onclick="formatText (myTextarea,'h1');" type="button">
<input class="tags" value="h2" onclick="formatText (myTextarea,'h2');" type="button">
<input class="tags" value="h3" onclick="formatText (myTextarea,'h3');" type="button">
</div>
<div style="float: left;"><h3 class="objs">Insert</h3>
<button class="objs" onClick="InsertText(this.form.myTextarea,RBtnStart.join('\n'))">RBtn</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,CBoxStart.join('\n'))">CBox</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,SBoxStart.join('\n'))">SBox</button>
<br>
<!--
<button class="objs" onclick="alert('Not coded yet')">1D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">2D-Array</button>
<button class="objs" onclick="alert('Not coded yet')">Populate</button>
<br>
<button class="objs" onclick="alert('Not coded yet')">Toggle</button>
-->
<button class="objs" onClick="InsertText(this.form.myTextarea,TblsStart.join('\n'))">Tabel</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<br>')">br</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,'<p>')">p</button>
<br>
<button class="objs" onClick="InsertText(this.form.myTextarea,ULstart.join('\n'))">ul-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,OLstart.join('\n'))">ol-li</button>
<button class="objs" onClick="InsertText(this.form.myTextarea,DLstart.join('\n'))">dl-dt</button>
</div>
<div style="float: left;"><h3 class="ctrl">Control</h3>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=HTMLstart.join('\n')">Template</button>
<button class="ctrl" onClick="javascript:this.form.myTextarea.focus();this.form.myTextarea.select();">
Highlight Text to Copy</button>
<button class="ctrl" onclick="document.getElementById('myTextarea').value=''">
Clear</button>
<p>
<button class="ctrl" onclick="document.getElementById('myEditResults').innerHTML = document.getElementById('myTextarea').value">
Display</button>
</div>
<div id="myEditResults" style="float:left; border: 1px solid red; height: 20em; width: 70em; overflow:auto;">
</div>
<br style="clear: both;">
</form>
</body>
</html>
Similar TutorialsI have a WYSIWYG text area and I want to insert combo-box' value at current cursor location of the WYSIWYG text area. I have a simple textarea where the value is inserting on combo-box clicking. But when I do integrate both files, the functionality wont work. I have both scripting files..
Sup yo, I need to add text in a <textarea>, but i can only append text at the end. Is there any way to add text to where the cursor is currently at? Code: function addCharm(var1) {
var newtext = var1;
document.lolform.inputtext.value += newtext;
}
And below i has sum buttonz that uses that function. So, again, how can I add text to where the I-beam is currently, instead of at the end? Thanks in advance. I have an image map with 6 areas. Code: <p class="center"><img src="images/car_feature.png" alt="" usemap="#car"/></p> <map id="car" name="car"> <area shape="rect" coords="172,198,195,222" href="#" alt=""/> <area shape="rect" coords="242,79,266,104" href="#" alt=""/> <area shape="rect" coords="293,124,317,149" href="#" alt=""/> <area shape="rect" coords="407,212,431,227" href="#" alt=""/> <area shape="rect" coords="430,300,453,325" href="#" alt=""/> <area shape="rect" coords="565,346,588,370" href="#" alt=""/> </map> I also have 6 DIVs that are hidden and only a single one will appear visible on mouseover of its corresponding image map area. Code: <div id="hidden"> <div class="feature"> Feature 1 </div> <div class="feature"> Feature 2 </div> <div class="feature"> Feature 3 </div> <div class="feature"> Feature 4 </div> <div class="feature"> Feature 5 </div> <div class="feature"> Feature 6 </div> </div> The roadblock I'm running into is the show function in the JavaScript. Code: window.onload = init;
function init() {
var area = document.getElementById("car").getElementsByTagName("area");
var features = document.getElementById("hidden").getElementsByTagName("div");
hide();
function show() {
for(a=0; a < area.length; a++) {
if(area[a].onmouseover) {
document.getElementById("hidden").getElementsByTagName("div")[a].style.display="block";
}
}
}
function hide() {
for(b=0; b < features.length; b++) {
document.getElementById("hidden").getElementsByTagName("div")[b].style.display="none";
}
}
for(i=0; i < area.length; i++) {
area[i].onmouseover = show;
area[i].onmouseout = hide;
}
}
I'm trying to get it so that if I hover over the first area on the image map, the first hidden DIV will appear, but none of the others. And if I hover over the fourth area, the fourth DIV will appear. I hope this makes sense, and I'd appreciate any and all help towards solving this issue and ending my headache lol hello im attempting to display the output of the radio selection into the textbox. For example, if the user selects 0-15 then display "Your age group is 0-15 years" in the text area. i get the basic logic. i just dont understand how to display the value in the textbox. heres what i have so far if it will clarify my issue. Code: <html>
<head>
<title>lab 8</title>
<script language="javascript">
function textbox()
{
var i;
for(i = 0; i < form1.agegroup.length; i++)
{
if (form1.agegroup[i].checked)
alert("you picked " + form1.agegroup[i].value);
}
}
</script>
</head>
<body>
What is your age group?<br>
<form name="form1">
<input type="radio" name="agegroup" value="0-15" checked>0-15<br>
<input type="radio" name="agegroup" value="16 to 20">16 to 20<br>
<input type="radio" name="agegroup" value="21 to 25">21 to 25<br>
<input type="radio" name="agegroup" value="26 to 35">26 to 3<br>
<input type="radio" name="agegroup" value="36 and up">36 and up<br>
<input type="button" value="submit" onclick="textbox();">
<form name="form2"><textarea rows ="2">
</textarea>
</body>
</html>
btw i know the alert part is wrong. its there because im taking the code i previously had and changing it to display in a textbox instead of an alert. thanks So I am working on a project to take an integer that the user gives, and then get all the squares and cubes of all the numbers before that to the number given. It displays it in a text area. Maybe I am just lost for the moment, but It just prints the number that I give with the square root and cube instead of starting from 1, and ended on the integer I give. Code: var square_cube = function (){//This f
var number = parseInt($("maxbase").value);
for (var i=1;i <= number;i++) {
var squ = Math.pow(i,2);
}
var j;
for (j=1;j<=number;j++)
{
var cub = Math.pow(j,3);
}
var message = i-1 + " " +squ+ " " +cub;
$("powers").value = message;
}
Hi, I am just a noob and this is my first go at javascript and html I am trying to figure out how to display info from an array in the <textarea>, I have tried a number of things nothings worked and I know it must be something simply but have tried a number of things I also have to clear the <textarea> after it displays the info mentioned above and I think I have that sorted but I also have to have the <textarea> display all signup info stored in the array when a user clicks on a button Here's the code Code: function show()
{
var myArray = new Array();
myArray[0] = document.getElementById('fullname').value; myArray[1] = document.getElementById('Address').value; myArray[2] = document.getElementById('Phone').value;
document.writeln('Thank you for signingup,' + ' ' + myArray[0] + '. Your details will be confirmed by E-mail to ' + myArray[2] );
document.writeln("<br>")
document.writeln('Details:')
document.writeln("<br>")
for (var i=0; i<myArray.length; i++)
{document.write(myArray[i] + "<br />"); }
}
Thanks Hi guys. I am a newbie here on this forum. I have tried to learn how to use javascript on HTML forms however I just couldn't find the answers to my questions on the net. Perhaps I am not using the correct 'terms' when searching so I decided to join a forum like this to ask help. Anyway, I have a form with multiple inputboxes and lists and my goal is to generate and display all the accumulated information to a textarea so that the user can copy it afterwards. I have an idea how I could make it work but I am not entirely sure how to put it on a code. I actually have a number of questions on this so let me start off with the first one. I am eager to learn javascript so I would post my questions one after the other as my questions get answered. That way I get to learn how to build the code from the top. So my first one is this.. 1. I would like to know how to display a user input on an inputbox to a textarea. My html form is like this: Code: <html>
<head>
<script language="javascript">
function generateLogs (form)
{
TW_Logger.tickDoc.value = TW_Logger.name.value;
}
</script>
</head>
<body>
<form name="TW_Logger">
<label for="name_id">Name: </label>
<input type="text" name="name" id="name_id"/><br /><br />
<label for="logs_id">Ticket Documentation: </label><br />
<textarea cols="53" rows="5" name="tickDoc" id="tickDoc_id">
</textarea><br /><br />
<label></label>
<input type="submit" value="Generate Logs" class="button1" onclick="generateLogs(this.form) " />
</form>
</body>
</html>
I don't know what I did wrong but the script is not working. I appreciate any help I can get from anyone. Thanks! I need a javascript that will print out the X and Y of the mouse on the screen as I move the mouse and keep up to date. The X and the Y must also be stored in a variable. (Trying to increase my knowledge of javascript so that I can make my web sites better and my experiments are all in making games) I have some own cursor with a .cur file. But it's very annoying to try changing each part from the css to the new cursor. Is there no aviable script in JS or HTML or CSS or whatever there is, that i can press the link for all cursor like: Pointer, defaut, wait, stop, link and so on. So they all changes into my own? Without having those white cursor. I would like to create a caret for a textarea like the one he http://www.dynamicdrive.com/forums/s...4576#post74576 it works great if I want a white background but when I changed it to black and tried to change the textarea's text color to yellow: Code: <textarea type="text" id="setter" style="color:yellow;"onkeydown="writeit(this, event);moveIt(this.value.length, event)" onkeyup="writeit(this, event)" onkeypress="writeit(this, event);"></textarea> I don't see anything on the screen other than the blinking cursor Hi, Would you please try the following in IE: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://dev.jquery.com/view/trunk/plugins/validate/jquery.validate.js"></script>
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>
<script>
$(document).ready(function(){
$("#curl").focus(function(){
if( this.value == this.defaultValue ) {
$(this).val("http://");
}
});
$("#commentForm").validate();
});
</script>
</head>
<body>
<form class="cmxform" id="commentForm" method="get" action="">
<fieldset>
<legend>A simple comment form with submit validation and default messages</legend>
<p>
<input id="cname" name="name" size="25" class="required" value="Name" />
</p>
<p>
<input id="cemail" name="email" size="25" class="required email" value="Email" />
</p>
<p>
<input id="curl" name="url" size="25" class="url" value="URL" />
</p>
<p>
<textarea id="ccomment" name="comment" cols="22" class="required">Comment</textarea>
</p>
<p>
<input class="submit" type="submit" value="Submit"/>
</p>
</fieldset>
</form>
</body>
</html>
As you see the cursor goes back to the beginning of the field if you focus on the URL field. It works with no problem in other browsers. How can it be corrected? Thanks for any help! i need typing cursor back in first text box after clicking ok of alert [CODE] <html> <head> <script type='text/javascript'> function player() { document.getElementById("Player2").value= document.getElementById("Player1").value; } function notEmpty(elem, helperMsg){ if(elem.value.length == 0){ alert(helperMsg); elem.focus(); return false; } return true; } </script> </head> <body> <form> Player:<input type="Name" id="Player1" onkeyup="player()"/> <input type="Name" id="Player2" DISABLED /> <input type='button' onclick="notEmpty(document.getElementById('Player2'), 'Please fill in player field!')" value='Submit' /> </form> </body> </html> [ICODE] Do you guys have any idea how I could move a div around a page on mouse down? Like drag and drop it where I want it to be on the page and grab its x,y position? If you guys have any code snippets or tips that would be greatly appreciated thanks! I have this image map and I need to change the cursor to finger on mouse over: <map name="Map" > <area shape="rect" coords="0,61,121,140" onClick="scr_valid(1)"> <area shape="rect" coords="175,101,445,204" onClick="scr_valid(0)" > </map> Adding href (<area shape="rect" coords="175,100,445,203" onClick="scr_valid(0)" href="#" >) does not work. Any body could help please? Thank you. Good day! In my javascript code I have a function for the enter key. I want to add cursor key in that function/ I research about the coding for cursor key but I can't find the code same on what I want to happen. Here is the code: Code: <script language="javascript">
function handleEnter(e, nextfield)
{
var characterCode = (e && e.which)? e.which: e.keyCode;
if(characterCode == 13)
{
document.getElementById(nextfield).focus();
return false;
}
else
{
return true;
}
}
</script>
<input type='text' name='plt' onkeypress='return handleEnter(event,\"b0\");' />
Thank you I've got the following html code for a button - how can I get the cursor to turn into the hand shape when the mouse is over the button? Thanks PHP Code: <INPUT NAME="btn_cancel" TYPE="button" VALUE="Cancel" onClick="cancel_button_click()";> I'm trying to write a function that is similar to the ctrl+f functionality you get in IE, where you have a search string and when you click 'next' the whole string if matched is highlighted by the cursor. This works fine for inputs and text areas using the following code: Code: function setCaretPos(obj, start, end)
{
var range = obj.createTextRange();
range.moveStart('character', start);
range.moveEnd('character', end - obj.value.length);
range.select();
}
But now I need to get it to work for normal text in a text node that is in the HTML/DOM. Is there an equivalent way of making the above method work for text in text nodes? Alternatively is there a way to make the browser (IE) at least focus on some text in a text node? (I could then highlight it with CSS styles). Hi i have a problem, i've been trying to fix this for the whole day pls see my code below Code: for ($o = 0; $o <= $totalclass; $o++)
{
for($i = 1; $i <= 45; $i++)
{
if ($_SESSION['classification'][$o] == $i)
{
$sql2="SELECT ClassDesc FROM tblclass WHERE ClassID = '$i'";
$result2=mysql_query($sql2);
// If successfully queried
if($result2)
{
while ($row2 = mysql_fetch_assoc($result2))
{
$ClassDesc2 = $row2['ClassDesc'];
}
}
//echo $ClassDesc2;
?>
<tr>
<td bgcolor="FAFAF6" class="small" valign="top">Class <? echo $i; ?></td>
<input type="hidden" name="<? echo "classid[]"; ?>" value="<? echo $i; ?>">
<td bgcolor="FAFAF6">
<textarea name="<? echo "specification[]"; ?>" COLS="50" ROWS="6" class="small" wrap="virtual" tabindex="<? echo $i; ?>"><? echo $ClassDesc2;?></textarea>
<input type="button" value="Reset" onclick="window.reset();" name="reset">
</td>
</tr>
<?
}
}
}
i've trying to create a button or image to reset one textarea (from whole array) and so far i've been unsuccessful. i've seen this on other website and i know it is possible to do this, pls help! it is required to locate the typing cursor in field after when click ok on java alert thanks in advance !! Hi, Need to put a cursor in a password form on page load here is what I got that does not work. This will be used on a touch screen Code: <script type = "text/javascript">
var count = 2;
function validate() {
var pw = document.myform.pword.value;
var valid = false;
/*Failed attempt to put cursor in myform on page Load */
function setCursor(myform){
return set;
}
var pwArray = ["1701", "Password2", "Password3", "Password4"]; // the corresponding passwords;
for (var i=0; i <pwArray.length; i++) {
if (pw == pwArray[i]) {
valid = true;
break;
}
}
if (valid) {
alert ("Login was successful");
window.location = "030.html";
return false;
}
var t = " tries";
if (count == 1) {t = " try"}
if (count >= 1) {
alert ("Invalid password. You have " + count + t + " left.");
document.myform.pword.value = "";
setTimeout("document.myform.pword.select()", 25);
count --;
}
else {
alert ("Still incorrect! You have no more tries left!");
document.myform.pword.value = "";
document.myform.pword.disabled = true;
return false;
}
}
</script>
Thank you for any help. |
|||||||