|
JavaScript - How To Format Textarea With Newline?
Hi,
I have a textarea element and I fill it with text. But I want to insert newlines to seperate some of the words in the textarea. I tried to use '\r' or '\n' or '\r\n', but none of them works. Code: var textArea = document.createElement('textarea');
textArea.value = 'good' + '\n' + 'morning';
The newline has no effect, it still show 'good morning'. Why? And also, I am going to write these words in the textarea into database and later retrieve them back from database to another textarea, should I keep the newline characters or is it better use some other delimiter? Many thanks. Similar Tutorialsif I have this inside TD tag Code: a<br>b what should I write instead ??? to reproduce new line in textarea Code: result = result.replace(/<br>/ig,"???") Hi, my javascript does not working after I retrieve a record that contains square symbol in the database. The square symbol should be a newline in a textarea. This is how the record "looks" in the table: Actually, I am inserting the record using ASP and the value with square symbol is the value from a textarea with newline/enter. After that I retrieve the value using ASP and pass it to javascript and then the page is not working. If I retrieve other record which contain no square symbol then the script is working. Please help on this, appreciates! Ok I have a textarea field that is validated by Js, this textarea can and will contain the newline character Code: \n so I validate in JS Code: if(textareaname.value.length < 200) this hten goes through to my php where i also check before I place in to the Database using MYSQL Code: if( strlen($_POST['textareaname']) < 200 ) but my php is giving me a different string length from my javascript. It looks as if Javascript is counting a newline as 1 character and php is treating it as 2. I have checked my slashes, I have used various REgex to check these data amounts. I have also Googled around and there doesnt seem much around. Any ideas? Any suggestions as to how I can make php and javascript treat a newline as the same amount of characters? Thanks in advance. I am trying to replace all newline characters with <br /> tags. The following two javascript functions that I've found, work in Firefox but do not work in Internet Explorer (I have version 7 installed on my machine). I would really appreciate any pointers on how to get this done. Thank you! Joe PS: I am using jQuery to call these functions. And this is how my JSP page looks like. Code: <html>
<head>
<title>New Line Replacement</title>
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
function replaceNewLine(myString) {
var regX = /\r\n|\r|\n/g;
var replaceString = '<br />';
return myString.replace(regX, replaceString);
}
$().ready(function(){
$(".replace-text").each(function(i) {
var sBody = $(this).html();
$(this).html(replaceNewLine(sBody));
});
});
/*
function nl2br(text){
text = escape(text);
var re_nlchar;
if(text.indexOf('%0D%0A') > -1){
re_nlchar = /%0D%0A/g ;
}else if(text.indexOf('%0A') > -1){
re_nlchar = /%0A/g ;
}else if(text.indexOf('%0D') > -1){
re_nlchar = /%0D/g ;
}
return unescape( text.replace(re_nlchar,'<br />') );
}
*/
</script>
</head>
<body>
<div class="replace-text">${model.paraOne}</div>
<div class="replace-text">${model.paraTwo}</div>
</body>
</html>
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! 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) 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 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 new to javascript. i want to make a form where a textarea, some buttons like bold,italic,link etc will be availablw. when user selecet some text from textarea and click bold button then one openig and closing tag will be added like this [sb]abc[/sb] how can i do this using javascript. any idea? pls. help 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 == "") 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 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. 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>
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? 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
Hi guys, My brain is not working. May be I need a coffee break. I need your expertise. Below is the code holding the textarea. Look for the element with the id : themessage Code: <table width="100%" border="0"> <tr><td rowspan="4"><input type="button" name="send_email" id="send_email" style="height:50px; width:100px;" value="SEND" onClick="return err_check();" /></td><td><span class="que">From : </span></td><td colspan="3"><?php echo $from_email; ?><input type="hidden" name="from_mail" id="from_mail" value="<?php echo $from_email;?>"/><input type="hidden" name="camp_id" id="camp_id" value="<?php echo $camp_id;?>"/></td></tr> <tr><td><span class="que">To : </span></td><td colspan="3"><input name="to_email" id="to_email" style="width:250px;" /></td></tr> <tr><td><span class="que">CC : </span></td><td colspan="3"><input name="cc_email" id="cc_email" style="width:250px;"/></td></tr> <tr><td><span class="que">Subject : </span></td><td colspan="3"><input style="width:300px;" name="subject" id="subject" /></td></tr> <tr><td rowspan="1" colspan="2"> </td><td><input type="checkbox" name="ori_pdf" id="ori_pdf" /> PDF Quotation</td><td> </td><td> </td></tr><tr><td colspan="2"><span class="que">Credit Application</span></td><td><input type="checkbox" name="corporate" id="corporate"/>Corporate</td><td><input type="checkbox" name="individual" id="individual" />Individual</td><td><input type="checkbox" name="cash" id="cash" />Cash Account</td> </tr> <tr> <td colspan="2" rowspan="3"></td><td><input type="checkbox" name="tabloid" id="tabloid" />Tabloid Example</td> <td><input type="checkbox" name="broadsheet" id="broadsheet" />Broadsheet Example</td></tr> <tr><td><input type="checkbox" name="colmt" id="colmt" />Column Sizes Tabloid</td> <td><input type="checkbox" name="colmb" id="colmb" />Column Sizes Broadsheet</td></tr> <tr><td><input type="checkbox" name="maps" id="maps" />Maps / Distribution</td><td colspan="2" align="right">External Attachments <input id="upload_file" name="upload_file" type="file"/> </td></tr> <tr><td colspan="2"><span class="que">Message :</span></td><td colspan="3"> <textarea id="themessage" name="themessage" rows="15" cols="80" style="width: 100%"> </textarea> </td></tr> </table> Now on a button click, I'm trying to pass some values which one of them happens to be what ever that is entered in the textarea. For some reason, the stupid JS is not reading. But I think it is me that is stupid, not JS. Below is the code i'm running to get the value. Code: var message = document.getElementById('themessage').value;
alert(message);
The alert simply returns blank. There is an alert, but no value even where there is text in the text area. Can someone please shed some light on this. pretty please |
|||||||