|
JavaScript - Textarea Linebreaks
I'm having trouble with the way my textarea is displaying text when it's submitted. It always comes out as one line of text instead of the way a user has entered it. Here's my code.
Code: <textarea name="info" value="" rows="7" cols="55"> Enter Your Personal Information Here </textarea><br /><br /> That is then called to a function which displays it in a new page. Code: <script>
function buildResume()
{
resInfo = document.myResume.info.value
flyWindow = window.open()
flyWindow.document.write("Personal Information " + resInfo);
}
</script>
If any knows how I could fix this it'd really help. I've tried using the pre element and wrap property with no luck. Similar TutorialsI'm relatively new to javascript and I'm having some issues in adding linebreaks i.e. working <br> tags via DOM manipulation. An example of where I cant get it to work is included in the function code below. The html file the script is used in contains one div with an id of pfield. If its helpful the full program is available at http://www.templeofmick/wumpus3.htm Code: function printHints() {
var vFlags = [0, 0, 0]; //Wumpus, Pit, bat
var wFlag = 0; //Use flags to insure each hint isnt printed multiple times
var pFlag = 0;
var bFlag = 0;
var node;
var i;
var pbreak = document.createElement("br");
var turnP = document.createElement("p");
var idString = ("turn" + turn);
turnP.setAttribute("id", idString);
document.getElementById("pfield").appendChild(turnP);
for (i = 0; i < 3; i++) {
vFlags = checkRoom(currentMap[currentRoom][i]);
if (vFlags[0] === 1) {
wFlag = 1;
}
if (vFlags[1] === 1) {
pFlag = 1;
}
if (vFlags[2] === 1) {
bFlag = 1;
}
}
node = document.createTextNode("You are in room " + currentRoom + ".");
document.getElementById(idString).appendChild(node);
document.getElementById(idString).appendChild(pbreak);
node = document.createTextNode("From here you can travel to room : " + currentMap[currentRoom][0] + "," + currentMap[currentRoom][1]
+ " and " + currentMap[currentRoom][2] + ".");
document.getElementById(idString).appendChild(node);
document.getElementById(idString).appendChild(pbreak);
if (wFlag === 1) {
node = document.createTextNode("The acrid stench of a nearby wumpus fills your delicate nostrils.");
document.getElementById(idString).appendChild(pbreak);
document.getElementById(idString).appendChild(node);
}
if (pFlag === 1) {
node = document.createTextNode("The whistling of the wind indicates that floors are in short supply nearby.");
document.getElementById(idString).appendChild(pbreak);
document.getElementById(idString).appendChild(node);
}
if (bFlag === 1) {
node = document.createTextNode("You can hear the mailicious gossiping of giant bats coming from a nearby room.");
document.getElementById(idString).appendChild(pbreak);
document.getElementById(idString).appendChild(node);
}
node = document.createTextNode("What now ? (M)ove or (S)hoot");
document.getElementById(idString).appendChild(pbreak);
document.getElementById(idString).appendChild(node);
}
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! Hi all, I'm loading external xml and displaying specific tagged elements in a textarea. It works fine in IE because I can turn the variable object into text with a simple object.text property, but in Firefox (using the serializeToString method), the object appears in my textarea tags and all. The code looks something like this (this is just a dummy script - imagine the xml is already loaded into the object xmlDoc ): Code: function writePage(){
document.write('<textarea name="inputText">'+myText+'</textarea>');
}
function xmlIsLoaded(){
if(window.ActiveXObject){ //tests for IE
myText = xmlDoc.getElementsByTagName("desiredTag")[0].text;
} else { //tests for FF
myText = (new XMLSerializer()).serializeToString(xmlDoc.getElementsByTagName("desiredTag")[0]);
}
writePage();
}
What am I missing here? I've tried toString, textContent, innerText, childNodes - just about everything I can think of to get just the text w/o the tags from the xml for the FF version. Any thoughts? ~gyz Hello there . Here is my simple code Quote: <html> <head> <script> function addText(){ document.getElementById("textarea").value+=document.getElementById("text").value+'\n'; document.getElementById("text").value=""; document.getElementById("text").onblur=document.getElementById("text").value=" Your Message..."; } </script> <style> #textarea{background-color:#F3F3F3; } </style> </head> <body> <form> <TEXTAREA id="textarea" COLS="80" ROWS="20" ></TEXTAREA><br/><br/> <input type="text" id="text" name="text" value=" Your Message..." onclick="this.value=''" size="96"> <input type="button" value="Send" name="submit" onclick="addText()"> </form> </body> </html> My problem is I dont know what to do iorder to make my send button to push the text entered in the text field from bottom to the top (not from the top to the bottom) I'm making this expanabel textarea which works fine, but... If I set a predefined numbers of rows, when start typing it jumps back (schrinks) into 2 rows... How do I avoid this? Code: <script>
function checkRows(textArea){
if (navigator.appName.indexOf("Microsoft Internet Explorer") == 0)
{
textArea.style.overflow = 'visible';
return;
}
while (
textArea.rows > 4 &&
textArea.scrollHeight < textArea.offsetHeight
){
textArea.rows--;
}
while (textArea.scrollHeight > textArea.offsetHeight)
{
textArea.rows++;
}
return;
}
</script>
<textarea style="overflow:hidden;" onkeyup="checkRows(this)" rows="4">Some Test Text</textarea>
Thanks in advance:-) I sell products on amazon. and ASINs are Amazon Identifiers for products. So If I want to check out my product pages I have to go to "www.amazon.co.uk/dp/ "I have to put an ASIN here" . If I can put everything together in the text box and hit go it should take me to the first page(first ASIN). Here is a sample ASIN B004Z2QORW I have the code below but I somehow cant get it to work. Please help. I haven't assigned anything to the go button. I will put a list of ASINs in the text area and the iframe should concatenate the value from a row to the hardcoded URL and when I click next it should concatenate the value from the next row; when I click previous the value from the previous row. Code: <HTML>
<Head>
<H1 align="center">Detail Page Lookup using ASINs</H1>
</head>
<body>
<textarea rows="10" cols="20" value="">
ASINs here
</textarea>
<button id="go">Go</button>
<button id="prev" align="right">Previous</button>
<button id="next" align="right">Next</button>
<br/>
<iframe id="myframe" src="http://www.amazon.co.uk/dp/" height="100%" width="100%">
<p>Your browser does not support iframes.</p>
</iframe>
<script>var domain='http://www.amazon.co.uk/dp/';
$('#prev, #next').on('click', function(e) {
var Myval = $('textarea').val().split('\n'),
now = $('#myframe').attr('src').replace(domain, '');
if (Myval.indexOf(now)==-1) {
var src=domain+Myval[0];
}else{
var p = Myval.indexOf(now)!==0 ? Myval.indexOf(now)-1 : Myval.length-1,
n = Myval.indexOf(now)==(Myval.length-1) ? 0 : Myval.indexOf(now)+1,
src = e.target.id=='next' ? domain+Myval[n] : domain+Myval[p];
}
$("#myframe").attr('src', src);
console.log(src);
});
?
</script>
</body>
</HTML>
Hey all, I have a script that limit characters and lines entered by users in a textarea.. i want instead of throwing that alert message to jump to the next line and the user can continue writing, here is the script: Code: <script type="text/javascript">
var alert_title='Input Restriction';
function limitTextarea(el,maxLines,maxChar){
if(!el.x)
{
el.x=uniqueInt();
el.onblur=function(){clearInterval(window['int'+el.x])}
}
window['int'+el.x]=setInterval(function(){
var lines=el.value.replace(/\r/g,'').split('\n'),
i=lines.length,
lines_removed,
char_removed;
if(maxLines&&i>maxLines){
alert('You can not enter\nmore than '+maxLines+' lines');
lines=lines.slice(0,maxLines);
lines_removed=1
}
if(maxChar){
i=lines.length;
while(i-->0)if(lines[i].length>maxChar){
lines[i]=lines[i].slice(0,maxChar);
char_removed=1
}
if(char_removed)
alert('You can not enter more\nthan '+maxChar+' characters per line')
}
if(char_removed||lines_removed)
el.value=lines.join('\n')
},50);
}
function uniqueInt(){
var num,maxNum=100000;
if(!uniqueInt.a||maxNum<=uniqueInt.a.length)uniqueInt.a=[];
do num=Math.ceil(Math.random()*maxNum);
while(uniqueInt.a.hasMember(num))
uniqueInt.a[uniqueInt.a.length]=num;
return num
}
Array.prototype.hasMember=function(testItem){
var i=this.length;
while(i-->0)if(testItem==this[i])return 1;
return 0
};
</script>
The HTML Code: <textarea onFocus="limitTextarea(this,5,40)" wrap="soft"></textarea> please help! Is it possible to limit a textarea input with a max amount of letters? So if the form said 1,000 character limit. Can it block it after the 1,000th one is reached? Hi, Nothing will display in my textarea after pressing an input number which have to seen on the display. The code is from a simple calculator <form action="#" method="get" onsubmit="return false"> <p> <textarea disabled="disabled"></textarea> </p> <div id="calculatorButtons"> <p> <button onclick="calculatorNumber(1)">1</button> <button onclick="calculatorNumber(2)">2</button> <button onclick="calculatorNumber(3)">3</button> <button onclick="calculatorOp('+')">+</button> </p> <p> <button onclick="calculatorNumber(4)">4</button> <button onclick="calculatorNumber(5)">5</button> <button onclick="calculatorNumber(6)">6</button> <button onclick="calculatorOp('-')">-</button> </p> <p> <button onclick="calculatorNumber(7)">7</button> <button onclick="calculatorNumber(8)">8</button> <button onclick="calculatorNumber(9)">9</button> <button onclick="calculatorOp('*')">*</button> </p> <p> <button onclick="calculatorNumber(0)">0</button> <button onclick="calculatorOp(',')">,</button> <button onclick="calculatorClear()">Clear</button> <button onclick="calculatorCalculate()">Calc</button> </p> </div> </form> function calculatorNumber(i) { document.form.getElementById('textarea').innerHTML = i; } What is the right way to refer to the textarea? I'm adding text into a text area using document.createTextNode Code: document.getElementById('controlQueueDump').appendChild(document.createTextNode(args+';'));
But whenever the user edits the text box, it will never update anything again. I can add as much as I want, but when a user edits it (for example removes the contents), BAM, it is no longer updated. it's a textarea so it should be appending the child to the value attribute. Thanks a lot. is it possible to make a textarea resize with text? so if e.g the text overflows, the text-area is automatically resized so that there's no scrolling? It needs to resize automatically as the user is typing (more or less), he/she shouldn;t click on any buttons to resize it
Hey everyone....I just started learning how to use Javascript and I have a problem.... I have an exercise in which I have to validate a form and write the info of all the fields in a textarea by pressing the submit button.....and I just can't do it. Code: <html>
<head>
<script language="javascript" type="text/javascript">
var radio_selection="";
function ValMode(){
Empty(myForm.name);
Empty(myForm.addr);
Empty(myForm.city);
Empty(myForm.mail);
radioButtons();
Empty2(myForm.multi);
return false;
}
function Empty(x){
if ((x.value.length==0)||(x.value==null)){
alert("Empty field");}
}
function Empty2(x){
if ((x.value==null)){
alert("Select an option");
}
}
function radioButtons() {
if (radio_selection=="")
alert("\nYou must check one of the radio buttons.");
}
</script>
</head>
<body>
<big><b>Example Form</b></big><br><br>
<b>The form</b><br>
<form name="myForm" onsubmit= "return ValMode();" >
Name <input type="text" name="name" size=30><br>
Address <input type="text" name="addr" size=30><br>
City <input type="text" name="city" size=30><br>
E-mail <input type="text" name="mail" size=30><br>
Room Type<br>
<input type="radio" name="personnumb" onClick="radio_selection='One person'">For One person<br>
<input type="radio" name="personnumb" onClick="radio_selection='For Two'">For Two<br>
<input type="radio" name="personnumb" onClick="radio_selection='For three'">For three<br>
<input type="radio" name="personnumb" onClick="radio_selection='Family suite'">Family suite<br>
How did you learn about us?<select name="mutli">
<option selected value="">--Select--
<option>From friend
<option>By chance
<option>Search engine
<option>Advertisement
</select><br>
I'd like additional service as: <br>
<input type="checkbox" name="veg">Vegetarian<br>
<input type="checkbox" name="hand">Handicap<br>
<input type="checkbox" name="allerg">Allergic to various substances<br>
<input type="checkbox" name="pet">Pet owner<br>
<input type="submit" value="submit form"><br>
<input type="reset" value="reset"><br>
<textarea cols=30 rows=10 id="textarea" name="textarea" >When you hit 'Submit' the user input will be written to htis textarea.</textarea>
</form>
</body>
</html>
Here is my code.I left out my sorry efforts of influencing the textarea. Any suggestions? hi I am trying to create a textarea. There is a default text inside textarea. so when user clicks inside textarea then submit button appears and default text disappears and when user clicks somewhere else or outside textarea then it gets back to original state i.e, default text appears back and submit button disappears. here is what i did sofar. in this code when i click inside textarea then submit button does appear but text does not erase and when i click outside then button remains in sight. Code: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#submit {
visibility: hidden;
}
</style>
</head>
<body>
<form>
<label>Message:</label>
<textarea name="message" id="message" rows="5" cols="30">write message here!</textarea><br />
<input type="button" name="submit" id="submit" value="submit" />
</form>
</body>
<script type="text/javascript" src="lib/jquery-1.4.min(Production).js"></script>
<script>
var flag = false;
$(document).ready(function () {
$('#message').click(function () {
flag = true;
$('#submit').css('visibility','visible');
if(flag == true) {
//alert(flag);
var msg = $('#message').val();
//alert(msg);
msg = "";
//alert(msg);
}
});
});
</script>
</html>
on html i named my textarea as features, is the code below correct cause is does not validate. if (document.forms.myform.features.value == "") I can write all kinds of stuff, but one thing is failing me, and is extremely frustrating. document.getElementById('fakeid').value; which is my least preferred option, won't even work on this text area. Either will: Code: var objElem = document.getElementById(strId);
var objElem = objElem.getElementsByTagName('textarea');
var strComment = objElem[0].value;
It will work fine in IE but will not in Firefox. I cannot understand why as I've done this many times before. The code it is using is: Code: <div id="commentAdd"><h3 id="commentHeader"><a href="javascript:;" onclick="func_toggle_visibility("commentAddContent");return false;">Add a comment</a></h3> <div class="contentnopadding" id="commentAddContent" style="display:block;"> <form id="formCommentAdd"> <div class="comleft"> <table> <tr><td><span class="subhead">Add Comment:</span></td><td><textarea id="fakeid" rows="3" cols="35"></textarea></td></tr> </table> </div> <div class="content"> <input id="commentAddSubmit" type="button" value="Submit Comment" onclick="commentInitAjax(this.id,'comment','1',false);"> </div> </form></div></div><br><br> <div class="contentnopadding"></div> hitting submit triggers that function (which i haven't pasted all of it, just the necessary parts). I have an alert right after where i assign the value, but it does not work in FF. Please help, it's giving me grief (if it helps, the HTML is written by javascript, but i can't see how it would have any effect). I found a script that is perfect for my need but it is written for forms textareas and I can seem to get it to work textareas that are not wrapped in form. Code: Code: <script>function insertAtCursor(sTag,eTag)
{
var obj = document.form.message;
var strPos;
var ie_strPos;
var oSel;
obj.focus();
strPos += sTag.length + eTag.length;
ie_strPos += sTag.length + eTag.length;
if (document.selection && document.selection.createRange) { // Internet Explorer
oSel = document.selection.createRange();
if (oSel.parentElement() == obj) {
oSel.text = sTag + oSel.text + eTag;
ie_strPos += oSel.text.length;
}
oSel.moveStart ('character', ie_strPos);
oSel.moveEnd ('character', 0);
oSel.select ();
}
else if (typeof(obj) != "undefined") { // Firefox
var longueur = parseInt(obj.value.length);
var selStart = obj.selectionStart;
var selEnd = obj.selectionEnd;
obj.value = obj.value.substring(0,selStart) + sTag + obj.value.substring(selStart,selEnd) + eTag + obj.value.substring(selEnd,longueur);
strPos += txtarea.value.substring(selStart,selEnd).length;
obj.selectionStart = strPos;
obj.selectionEnd = strPos;
obj.focus ();
}
else obj.value += sTag + eTag;
obj.focus();
} </script>
<button onclick="insertAtCursor('[blah]','[/blah]')">Test</button>
<form method="post" name="form" action="">
<textarea name="message" cols="50" rows="10"></textarea>
</form>
My textarea: Code: <textarea id="new_topic_text" class="new-topic-subject-text elastic" style="overflow: hidden;"></textarea> Hi all. I have a textfield on my form problem. My boss wants it as a textfield to keep the field small on the page but still wants to be able to read all of the information that is in the field. What can I do with this?? Can we have change to textarea when he hovers to clicks in it. Any help would be appreciated. so I am creating a silly word ;irate word interpreter page, and I need some logic behind how to add text to a textarea each time I click on a button. Each time the user clicks on the button, the value is inserted into the text area. You should be able to click on multiple buttons to add to the last text that appears. Then I have a delete translation button when I want to clear the textarea field. A good example would be if the user clicks on the button with the value "sir", than "matey" will appear in the textarea. Now, if the user clicks on the button with the value "your", then "yer" will come up after matey. It's like creating a sentence on your own, and then deleting it when your done. Code: <body> <div id="page"> <div> <img style="float:left" src="slue.gif" width="205" height="190" alt=""> <div> <h1>Pirate Translator</h1> <p>Simply click on the buttons to translate words and/or phrases from English to pirate talk</p> </div> </div><br /> <hr /> <form name="pirate"> <div> <fieldset> <legend><b>Greetings:</b></legend> <input type="button" id="greeting" value="hello" /> <input type="button" id="greeting" value="pardon me" /> <input type="button" id="greeting" value="excuse me" /> <input type="button" id="greeting" value="" /> <input type="button" id="greeting" value="" /> <input type="button" id="greeting" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>People:</b></legend> <input type="button" id="people" value="sir" /> <input type="button" id="people" value="madam" /> <input type="button" id="people" value="miss" /> <input type="button" id="people" value="stranger" /> <input type="button" id="people" value="officer" /> <input type="button" id="people" value="" /> <input type="button" id="people" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Questions:</b></legend> <input type="button" id="question" value="where is" /> <input type="button" id="question" value="can you help me" /> <input type="button" id="question" value="is that" /> <input type="button" id="question" value="how far is it to" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> <input type="button" id="question" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Articles:</b></legend> <input type="button" id="article" value="the" /> <input type="button" id="article" value="my" /> <input type="button" id="article" value="your" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> <input type="button" id="article" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Adjectives:</b></legend> <input type="button" id="adject" value="old" /> <input type="button" id="adject" value="attractiv" /> <input type="button" id="adject" value="happy" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> <input type="button" id="adject" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Places:</b></legend> <input type="button" id="places" value="restroom" /> <input type="button" id="places" value="restaurant" /> <input type="button" id="places" value="mall" /> <input type="button" id="places" value="hotel" /> <input type="button" id="places" value="pub" /> <input type="button" id="places" value="" /> <input type="button" id="places" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Desires:</b></legend> <input type="button" id="desire" value="I would like to" /> <input type="button" id="desire" value="I desire" /> <input type="button" id="desire" value="I wish I knew how to" /> <input type="button" id="desire" value="my mother told me to" /> <input type="button" id="desire" value="my campanion tells me to" /> <input type="button" id="desire" value="" /> <input type="button" id="desire" value="" /> </fieldset> </div> <div> <fieldset> <legend><b>Actions:</b></legend> <input type="button" id="action" value="find" /> <input type="button" id="action" value="take a nap" /> <input type="button" id="action" value="kill" /> <input type="button" id="action" value="hurt you" /> <input type="button" id="action" value="beat you up" /> <input type="button" id="action" value="go to the bathroom" /> <input type="button" id="action" value="" /> </fieldset> </div> <div> <p id="output"><textarea id="task_list" rows="5" cols="130"></textarea></p> <p id="output"><input type="button" id="" value="Delete Traslations" /></p> </div> </div> </form> <script src="js/translate.js"></script> </body> </html> |
|||||||