เวลาส่งมันจะเป็นข้อความติดกัน ไม่ขึ้นบรรทัดใหม่
ใช้ฟังก์ชั่น
$data=nl2br($data);
รูปแบบการเว้นบรรทัดใน <textarea> จะแทนด้วย \n
รูปแบบการแสดงผลของ html แทนด้วย <br>
ถ้าต้องการ เขียนเว็บบรรทัด สมมุติว่า เขียน input form เป็น textarea แล้วมีการเว้นบรรทัด ก่อนที่เราจะบันทึกข้อความลงฐานข้อมูล ลองใช้ฟังก์ชั่นเช่น
$TEXT= str_replace(“\n”, “<br>\n”, “$TEXT”);
ฟังก์ชั่นนี้จะแปลง ค่าของ $TEXT จาก \n เปลี่ยนเป็น <br> จากนั้นให้บันทึกลงฐานข้อมูลตามปกติ
และในส่วนเวลาดึงฐานข้อมูลมาแสดงนั้น มันก็จะเว้นบรรทัดตามที่เราเว้นใน text area
การแก้ไขข้อความ ก็แปลงกลับมาอีกที เพื่อให้แสดงผลใน text area แล้วเว้นบรรทัดให้เหมือนที่เราเคยพิมพ์เอาไว้ตามปกติ
การขึ้น บรรทัดใหม่ ใน textarea ด้วย Special Characters in HTML
การขึ้นบรรทัดใหม่ใน textarea 3 กรณี
1.ข้อมูลจากตัวแปร ต้องการแสดงใน textarea แบบขึ้นบรรทัดใหม่ตามต้องการ แทรก \r\n ไว้ก่อนข้อความที่ต้องการขึ้นบรรทัดใหม่ แล้วนำค่าไปแสดงใน textarea
<?php $data="line 1\r\nline2"; ?> <textarea name="textarea" id="textarea2" cols="45" rows="5"><?=$data?></textarea>
2. ข้อมูลที่กำหนดค่าเข้าไปใน textarea โดยตรง จะแทรกด้วย Special Characters ไว้ก่อนข้อความที่ต้องการขึ้นบรรทัดใหม่
<textarea name="textarea" id="textarea1" cols="45" rows="5">line 1 line 2 line 3</textarea>
3. ข้อมูลที่ต้องการแสดงใน textarea ด้วย javascript (ในที่นี้ใช้ jQuery) จะแทรก
ด้วยเครื่องหมาย \r\n ไว้ก่อนข้อความที่ต้องการขึ้นบรรทัดใหม่
<textarea name="textarea" id="textarea3" cols="45" rows="5"></textarea> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script> <script type="text/javascript"> $(function(){ $("#textarea3").val("line 1\r\nline 2"); }); </script>
Special Characters in HTML
left single quote ‘ ‘ right single quote ’ ’ single low-9 quote ‚ ‚ left double quote “ “ right double quote ” ” double low-9 quote „ „ dagger † † double dagger ‡ ‡ per mill sign ‰ ‰ single left-pointing angle quote ‹ ‹ single right-pointing angle quote › › black spade suit ♠ ♠ black club suit ♣ ♣ black heart suit ♥ ♥ black diamond suit ♦ ♦ overline, = spacing overscore ‾ ‾ leftward arrow ← ← upward arrow ↑ ↑ rightward arrow → → downward arrow ↓ ↓ trademark sign ™ ™ ™ unused �-  horizontal tab 	 line feed unused  space   exclamation mark ! ! double quotation mark " " " number sign # # dollar sign $ $ percent sign % % ampersand & & & apostrophe ' ' left parenthesis ( ( right parenthesis ) ) asterisk * * plus sign + + comma , , hyphen - - period . . slash / ⁄ / digits 0-9 0- 9 colon : : semicolon ; ; less-than sign < < < equals sign = = greater-than sign > > > question mark ? ? at sign @ @ uppercase letters A-Z A- Z left square bracket [ [ backslash \ \ right square bracket ] ] caret ^ ^ horizontal bar (underscore) _ _ grave accent ` ` lowercase letters a-z a- z left curly brace { { vertical bar | | right curly brace } } tilde ~ ~ ellipses … … … en dash – – – em dash — — — unused ˜- Ÿ nonbreaking space   inverted exclamation ¡ ¡ ¡ cent sign ¢ ¢ ¢ pound sterling £ £ £ general currency sign ¤ ¤ ¤ yen sign ¥ ¥ ¥ broken vertical bar ¦ ¦ or &brkbar; ¦ section sign § § § umlaut ¨ ¨ or ¨ ¨ copyright © © © feminine ordinal ª ª ª left angle quote « « « not sign ¬ ¬ ¬ soft hyphen ­ ­ registered trademark ® ® ® macron accent ¯ ¯ or &hibar; ¯ degree sign ° ° ° plus or minus ± ± ± superscript two ² ² ² superscript three ³ ³ ³ acute accent ´ ´ ´ micro sign µ µ µ paragraph sign ¶ ¶ ¶ middle dot · · · cedilla ¸ ¸ ¸ superscript one ¹ ¹ ¹ masculine ordinal º º º right angle quote » » » one-fourth ¼ ¼ ¼ one-half ½ ½ ½ three-fourths ¾ ¾ ¾ inverted question mark ¿ ¿ ¿ uppercase A, grave accent À À À uppercase A, acute accent Á Á Á uppercase A, circumflex accent    uppercase A, tilde à à à uppercase A, umlaut Ä Ä Ä uppercase A, ring Å Å Å uppercase AE Æ Æ Æ uppercase C, cedilla Ç Ç Ç uppercase E, grave accent È È È uppercase E, acute accent É É É uppercase E, circumflex accent Ê Ê Ê uppercase E, umlaut Ë Ë Ë uppercase I, grave accent Ì Ì Ì uppercase I, acute accent Í Í Í uppercase I, circumflex accent Î Î Î uppercase I, umlaut Ï Ï Ï uppercase Eth, Icelandic Ð Ð Ð uppercase N, tilde Ñ Ñ Ñ uppercase O, grave accent Ò Ò Ò uppercase O, acute accent Ó Ó Ó uppercase O, circumflex accent Ô Ô Ô uppercase O, tilde Õ Õ Õ uppercase O, umlaut Ö Ö Ö multiplication sign × × × uppercase O, slash Ø Ø Ø uppercase U, grave accent Ù Ù Ù uppercase U, acute accent Ú Ú Ú uppercase U, circumflex accent Û Û Û uppercase U, umlaut Ü Ü Ü uppercase Y, acute accent Ý Ý Ý uppercase THORN, Icelandic Þ Þ Þ lowercase sharps, German ß ß ß lowercase a, grave accent à à à lowercase a, acute accent á á á lowercase a, circumflex accent â â â lowercase a, tilde ã ã ã lowercase a, umlaut ä ä ä lowercase a, ring å å å lowercase ae æ æ æ lowercase c, cedilla ç ç ç lowercase e, grave accent è è è lowercase e, acute accent é é é lowercase e, circumflex accent ê ê ê lowercase e, umlaut ë ë ë lowercase i, grave accent ì ì ì lowercase i, acute accent í í í lowercase i, circumflex accent î î î lowercase i, umlaut ï ï ï lowercase eth, Icelandic ð ð ð lowercase n, tilde ñ ñ ñ lowercase o, grave accent ò ò ò lowercase o, acute accent ó ó ó lowercase o, circumflex accent ô ô ô lowercase o, tilde õ õ õ lowercase o, umlaut ö ö ö division sign ÷ ÷ ÷ lowercase o, slash ø ø ø lowercase u, grave accent ù ù ù lowercase u, acute accent ú ú ú lowercase u, circumflex accent û û û lowercase u, umlaut ü ü ü lowercase y, acute accent ý ý ý lowercase thorn, Icelandic þ þ þ lowercase y, umlaut ÿ ÿ ÿ Alpha Α Α alpha α α Beta Β Β beta β β Gamma Γ Γ gamma γ γ Delta Δ Δ delta δ δ Epsilon Ε Ε epsilon ε ε Zeta Ζ Ζ zeta ζ ζ Eta Η Η eta η η Theta Θ Θ theta θ θ Iota Ι Ι iota ι ι Kappa Κ Κ kappa κ κ Lambda Λ Λ lambda λ λ Mu Μ Μ mu μ μ Nu Ν Ν nu ν ν Xi Ξ Ξ xi ξ ξ Omicron Ο Ο omicron ο ο Pi Π Π pi π π Rho Ρ Ρ rho ρ ρ Sigma Σ Σ sigma σ σ Tau Τ Τ tau τ τ Upsilon Υ Υ upsilon υ υ Phi Φ Φ phi φ φ Chi Χ Χ chi χ χ Psi Ψ Ψ psi ψ ψ Omega Ω Ω omega ω ω password dot ● ● bullet • •
http://www.degraeve.com/reference/specialcharacters.php
echo ข้อความจากtextarea แล้วมันไม่ขึ้นบรรทัดให้ มันยาวๆไปบรรทัดเดียวเลย
ถ้าผู้ใช้กด enter เวลาจะขึ้นบรรทัดใหม่ใน textarea เป็น \n
ถ้าผู้ใช้กด enter เราก็แค่เรียกฟังชั่น str_replace เข้ามาเปลี่ยน \n เป็น <BR>
แต่ถ้าผู้ใช้งานไม่กด Enter แต่พิมพ์ๆไปยาวๆเลยในหน้าแสดงผลของผู้ใช้งานตรง textarea มันก็ขึ้นบรรทัดใหม่ให้อยู่ แต่ในฐานข้อมูลมันไม่ได้
ตอบ กำหนดความกว้างของ div ให้มัน
<div style="width:800px;"><?php echo $textarea?></div>
แอตทริบิวต์
= ใหม่ใน HTML5
คุณลักษณะ ความคุ้มค่า ลักษณะ
autofocus autofocus ระบุว่าพื้นที่ข้อความโดยอัตโนมัติควรได้รับการมุ่งเน้นเมื่อโหลดหน้าเว็บ
cols number ระบุความกว้างที่มองเห็นของพื้นที่ข้อความ
dirname textareaname.dir ระบุว่าทิศทางข้อความของ textarea ที่จะถูกส่ง
disabled disabled ระบุว่าพื้นที่ข้อความควรจะปิดการใช้งาน
form form_id ระบุหนึ่งหรือมากกว่าหนึ่งรูปแบบพื้นที่ข้อความเป็น
maxlength number ระบุจำนวนสูงสุดของตัวละครที่ได้รับอนุญาตในพื้นที่ข้อความ
name text ระบุชื่อสำหรับพื้นที่ข้อความ
placeholder text ระบุคำแนะนำสั้น ๆ ที่อธิบายถึงค่าที่คาดหวังของพื้นที่ข้อความ
readonly readonly ระบุว่าพื้นที่ข้อความควรจะอ่านอย่างเดียว
required required ระบุว่าพื้นที่ข้อความจะต้อง / ต้องกรอก
rows number ระบุจำนวนที่มองเห็นของสายในพื้นที่ข้อความ
wrap hard ระบุว่าข้อความในพื้นที่ข้อความจะถูกห่อเมื่อส่งในรูปแบบ
soft
http://www.w3ii.com/th/tags/tag_textarea.html
ตกแต่งกล่องรับข้อความ Text Input ( Text Box )
ในภาษา HTML จะมีสคริปต์สั้นๆ คือ Text Input ( หรือ Text Box กล่องรับความ) เป็นกรอบสำหรับให้ผู้เข้าเว็บไซต์กรอกข้อมูลลงไป ลักษณะข้อมูลที่กรอกลงไปจะเป็นข้อความหนึ่งบรรทัด(ฟิลด์ข้อมูล) สำหรับส่งข้อมูลไปยังฝั่งผู้ดูแลเว็บ หรือ Server เพื่อเก็บเข้าไปไว้ในฐานข้อมูล หรือตอบโต้กับผู้ใช้งาน เป็นส่วนความสำคัญอย่างมากสำหรับการสร้างชุดคำสั่งที่จะรับข้อมูลจากผู้ใช้งานผ่านหน้าเว็บฯ ซึ่งเป็นกระบวนการแรกที่จะรับข้อมูลมา ก่อนทำการประมวลผล มีรูปแบบแตกต่างกันไป เหมาะในการนำไปใช้ในกรณีต่างๆ ที่จำเป็นสำหรับจัดการหน้าเอกสาร(HTML)ให้สวยงามและง่ายสำหรับผู้ใช้งาน โดยไม่จำเป็นต้องใช้ภาษา JAVA ที่มีความยุ่งยากซับซ้อน เป็นสคริปต์ที่สามารถประยุกต์นำไปใช้ในการจัดสร้างหน้าเอกสาร, การรับข้อมูล, บันทึกข้อความ หรือบันทึกระเบียนรายงานต่างๆได้สะดวก
มาเริ่มต้นง่ายๆ ด้วยการเรียนรู้สคริปต์ Text Input ที่รับข้อความ
แบบปกติ (รูปแบบทั่วไป)
< input type=text name=user >
การกำหนดขนาดของกล่องรับข้อความ
< input type=text name=user size=50 >
< input type=text name=user size=3 >
การจำกัดจำนวนอักษร ในกล่องรับข้อความ
< input type=text name=user maxlength=6 >
** จำกัดไว้ 6 ตัวอักษร
การกำหนดค่าเริ่มต้นไว้บนกล่องรับข้อความ
< input type=text name=user value=”ศูนย์วิศวกรรม” >
การกำหนดไม่ให้แก้ไขข้อความ ในกล่องรับข้อความ
< input type=text name=user value=”ศูนย์วิศวกรรม” readonly >
การปกปิดตัวอักษร หรือ รหัสผ่าน ในกล่องรับข้อความ
< input type=password name=user >
CSS ย่อมาจากคำว่า Cascading Style Sheets บางทีอาจจะเรียกว่า Style Sheets หรือ CSS ซึ่งจริงๆแล้วมันคือตัวเดียวกัน
CSS จะทำงานร่วมกับ HTML โดยจะกำหนดการแสดงผลของสิ่งต่างๆ บนเว็บ เช่น สีอักษร สีพื้นหลัง ขนาดตัวอักษร จัดการเลย์เอ้าท์ ให้สวยงามและอื่นๆ
การกำหนดชนิดและขนาดตัวอักษร ในกล่องรับข้อความ
< input type=text name=user style=”font: 16pt AngsanaUPC” >
การกำหนดตัวอักษร เป็นตัวพิมพ์ใหญ่ทั้งหมด Display Uppercase ( เฉพาะอักษรภาษาอังกฤษ )
< input type=text name=user style=”text-transform: uppercase” >
การกำหนดสีให้ตัวอักษร
< input type=text name=user style=”color: #0000FF” >
การกำหนดความหนาตัวอักษร
< input type=text name=user style=”font-weight: bold” >
การจัดแนว ในกล่องรับข้อความ
ปกติข้อความจะไปชิดด้านซ้ายมือ เราจะจัดไว้ชิดขวามือ ใช้สำหรับกรอกตัวเลข ( เหมือนเครื่องคิดเลข )
< input type=text name=user style=”text-align: right” >
การใส่สี ลงในกล่องรับข้อความ
< input type=text name=user style=”background: #C0F9BD” >
การใส่ภาพพื้นหลัง ลงในกล่องรับข้อความ
< input type=text name=user style=”background-image:url(image/bg_pc_foot.gif)” >
ใส่สีกรอบให้เป็นสีดำ
< input type=text name=user style=”border: 1px black solid” >
ใส่สีกรอบ เป็นสีน้ำเงิน
< input type=text name=user style=”border: 1px #0000FF solid” >
เพิ่มความหนาเส้นกรอบ
< input type=text name=user style=”border: 3px black solid” >
ทำกรอบเป็นจุด
< input type=text name=user style=”border: 2px dotted” >
การกำหนดไม่ให้มีกรอบ
< input type=text name=user style=”border: none” >
หรือ
< input type=text name=user
style=”BORDER-RIGHT: medium none; BORDER-TOP: medium none; BORDER-LEFT: medium none; BORDER-BOTTOM: medium none” >
** อยู่ข้างหน้านี้ ลองกรอกข้อมูล ( ลักษณะแบบนี้เอาไปใช้ทำเป็นช่องตารางบันทึกข้อความ )
ทำกรอบให้เป็นเส้นใต้แบบคู่
< input type=text name=user style=”border: none; border-bottom: 3px navy double” >
ทำกรอบสีและมีเส้นใต้แบบคู่
< input type=text name=user style=”border: 1px #0000FF solid; border-bottom: 3px navy double” >
วิธีใส่รูปลงไปในช่อง Comment (Text Area) ซึ่งเป็นกรอบรับข้อความหลายๆบรรทัด
< TEXTAREA style=”width: 500; height: 300; background: URL(image/mcot2.jpg) center no-repeat fixed” >
ปัญหา Text Area พอดึงมาแสดงผลจาก sql มันไม่ขึ้นบรรทัดใหม่
ต้อง การ เป็น แบบ ไหน?
ตัดบันทัดอัตโนมัตร หรือ ให้ ขึ้น บันทันใหม่
ตัดแบบอัตโนมัติ แบบว่าไม่ให้มันเลยตารางมราตั้งไว้
และพอกด enter ให้มันขึ้นบรรทัดใหม่
ใช้ function wordwrap()
Description
string wordwrap ( string str [, int width [, string break [, bool cut]]] )
wordwrap() example
<?php $text = "The quick brown fox jumped over the lazy dog."; $newtext = wordwrap($text, 20, "<br />\n"); echo $newtext; ?>
NL2BR(); ฟังก์ชั่นขึ้นบรรทัดใหม่ PHP
nl2br(); เป็นฟังก์ชั่นขึ้นบรรทัดใหม่ ของภาษา PHP
การทำงานเมื่อพบข้อความที่ขึ้นบรรทัดใหม่ โดยการ Enter ฟังก์ชั่น nl2br นี้ก็จะแทน Enter ด้วย <br />
ใช้งาน ฟังก์ชั่น nl2br();
<?php $string="เป็นฟังก์ชั่นขึ้นบรรทัดใหม่ ของภาษา PHP ทดสอบก่อนใช้คำสั่ง และ หลังใช้คำสั่ง nl2br"; echo "$string"; ?>
ก่อนใช้ ฟังก์ชั่น nl2br(); เมื่อเราใช้คำสั่ง echo เพื่อแสดงข้อความ
** ข้อความจะแสดงติดกันเป็นแถว โดยจะไม่แสดงตามรูปแบบเดิม
หลังใช้
** ข้อความจะแสดงเป็นบรรทัด ตามรูปแบบข้อความต้นฉบับ
ในกรณีใช้ร่วมกับ textarea หากต้องการดึงข้อมูจาก DB มาแสดงใน textarea ไม่ต้องใช้ nl2br();
เพราะจะได้ <br /> ติดมาด้วย โดยปกติ tags ของ textarea จะขึ้นบรรทันใหม่ให้เอง nl2br เป็นการแปลง newline (\n , \r\n) เวลากด enter ให้เป็น <br>
nl2br ใช้สำหรับเปลี่ยน \r\n เป็น <br> \r\n เกิดจากการ enter ถ้าไม่ enter ยังไงมันก็ไม่ตัด
ใช้ wordwrap();เข้ามาช่วยเหลือครับ
wordwrap(nl2br($description),40,”\n”,true);// มันจะตัดคำแต่ละบรรทัด มีตัวอักษรครบ40คำแล้วขึ้นบรรทัดใหม่ให้เองครับ ส่วน nl2br นั้น ก็จะขึ้นบรรทัดใหม่ตามที่ผู้ใช้งานกด enter ปกติ
ex
$detail_ques=wordwrap(nl2br(htmlspecialchars($detail_ques)),40,"\n",true);
textarea ให้ตัด <br> ออก โดยที่ให้บรรทัดติดกัน ทำอย่างไร
echo nl2br($result[“description”]); ==> เป็น2บรรทัด มี BR ติดมา
$txt = str_replace(“<br />”,” “,nl2br($result[‘description’])); echo $txt; ==>ก็ไม่ได้
คุณน่าจะผิดตั้งแต่ขั้นตอนการเก็บน่ะครับ อันที่จริง ควรเก็บข้อมูลจริง ๆ เลยครับ โดยไม่ต้องเข้า fucntion nl2br() เพราะ function นี้ไว้สำหรับแสดงผลครับ ส่วนเอากลับมาใน textarea ก็ไม่ต้องเข้า function nl2br() เช่นเดียวกันครั
สำหรับในตัวอย่างขอบคุณลองใช้ \n ดู
$txt = str_replace("\n"," ",$result['description']); echo $txt;
PHP – nl2br () เพื่อแสดงผลจากข้อมูลให้ถูกต้อง
บางครั้งหากเราทำอะไรบางอย่างกับข้อมูลแบบ String ใน PHP หรือ Text ใน Sql บางครั้งการแสดงผลตรง ๆ อย่าง echo หรือ print อาจมีการเว้นบรรทัดไม่ถูกต้อง หรือแสดงข้อมูลบางอย่างผิดเพี้ยนไป บางครั้งสามารถแก้ได้ง่าย ๆ ด้วย function nl2br () ดังนี้
print nl2br ($data); แทนที่แบบเดิม คือ print ($data);
ในหลาย ๆ กรณีจะทำให้ได้การแสดงผลที่ถูกต้องมากขึ้น โดยเฉพาะอย่างยิ่งการใช้ร่วมกับ Tag TextArea ของ Html ที่เรารับข้อมูลเป็น Text แต่เมื่อต้องการแสดงผลออกมาอาจมีการเว้นบรรทัดไม่ตรงกับเจตนาดั้งเดิมของผู้ใช้ เราจึงจำเป็นต้องใช้ function nl2br () ช่วย
http://php.net/manual/en/function.nl2br.php
string nl2br ( string $string [, bool $is_xhtml = true ] )
ตัวอย่าง
<?php echo nl2br("yyyyyyyyyyyyyy\n xxxxx"); ?>
แสดงผล
yyyyyyyyyyyyyy<br /> xxxxxx
เวลาพิมพ์ข้อความใน textarea แล้วกด enter ขึ้นบรรทัดใหม่
พอนำมาแสดงผล มันไม่ขึ้นบรรทัดใหม่ให้
ตอนเอาข้อมูลจากฐานข้อมูลมาแสดงผลให้ใช้คำสั่ง nl2br (Newline To BR)
Ex
จาก echo $a; ก็ใช้เป็น echo nl2br($a) แทน
ในการแสดงผลก็จะขึ้นบรรทัดใหม่ให้เหมือนกับตอนที่พิมพ์ใน textarea
ปกติเราถ้าใช้ textarea แล้วบันทึกลงฐานข้อมูลตอนที่กด enter มันจะมี \n ซ่อนไปในข้อมูลด้วยเมื่อจะนำไปแสดงใน html แล้วให้ขึ้นบรรทัดใหม่ก็ให้ใช้ nl2br แต่ถ้าจะเอาไปแสดงใน textarea ไม่ต้องใส่ nl2br เจ้า tag textarea มันจะขึ้นบรรทัดใหม่ให้เอง