จะเพิ่มค่าเริ่มต้นสำหรับ html <textarea> ได้อย่างไร [ปิด]

349

ปิด. คำถามนี้เป็นคำถามที่ไม่สามารถทำซ้ำหรือเกิดจากความผิดพลาด ไม่ยอมรับคำตอบในขณะนี้

ต้องการปรับปรุงคำถามนี้หรือไม่ อัปเดตคำถามเพื่อให้เป็นไปตามหัวข้อสำหรับ Stack Overflow

ปิดให้บริการใน9 เดือนที่ผ่านมา

ฉันต้องการที่จะตั้งค่าเริ่มต้นสำหรับ <textarea>HTML <textarea>This is default text</textarea>ผมอ่านจากวัสดุที่จะเพิ่มค่าเริ่มต้นที่คุณต้องทำสิ่งที่ชอบ ฉันทำอย่างนั้น แต่มันไม่ทำงาน สิ่งที่ถูกต้องทำคืออะไร?

html textarea

— Newbie Coder
แหล่งที่มา

1

วิธีที่คุณแสดงคือวิธีการทำงาน แสดงรหัส HTML ของคุณหากไม่เป็นเช่นนั้น

— Pekka

โปรดแสดง html ของคุณ ...

— Daniel Ramirez-Escudero

1

ชุดคำตอบสำหรับคำถามที่ไม่มีความพยายามของรหัสที่ระบุไว้ในนั้น ให้ปฏิบัติต่อคำถามโดยไม่ใช้ความพยายามนี้ดังนั้นคำถามจะไม่ได้รับการ "ไม่มีรหัส" หรือ "สามารถทำซ้ำได้อีกต่อไป" เหตุผลที่ปิด

— Tsyvarev

620

นี่คือตัวอย่างjsFiddleของฉัน มันใช้งานได้ดี:

<textarea name='awesome'>Default value</textarea>

— Andrew Jackman
แหล่งที่มา

94

คุณสามารถใช้ตัวยึด Attributeซึ่งไม่เพิ่มค่าเริ่มต้นแต่อาจจะเป็นสิ่งที่คุณกำลังมองหา:

<textarea placeholder="this text will show in the textarea"></textarea>

ลองดูที่นี่ - http://jsfiddle.net/8DzCE/949/

หมายเหตุสำคัญ (ตามที่ Jon Brave แนะนำในความคิดเห็น) :

แอตทริบิวต์ตัวยึดไม่ได้ตั้งค่าของ textarea ค่อนข้าง "แอตทริบิวต์ตัวยึดตำแหน่งเป็นคำใบ้สั้น ๆ (คำหรือวลีสั้น ๆ ) ที่มีวัตถุประสงค์เพื่อช่วยเหลือผู้ใช้ในการป้อนข้อมูลเมื่อตัวควบคุมไม่มีค่า" [และมันจะหายไปทันทีที่ผู้ใช้คลิกเข้าไปใน textarea] มันจะไม่ทำหน้าที่เป็น "ค่าเริ่มต้น" สำหรับการควบคุม หากคุณต้องการคุณจะต้องใส่ข้อความที่ต้องการในช่องนี่คือค่าเริ่มต้นจริงตามคำตอบอื่น ๆ ที่นี่

— bhavya_w
แหล่งที่มา

14

คุณควรให้ชัดเจนว่าplaceholderไม่ได้ตั้งค่าtextareaของ ค่อนข้าง "แอตทริบิวต์ตัวยึดตำแหน่งเป็นคำใบ้สั้น ๆ (คำหรือวลีสั้น ๆ ) ที่มีวัตถุประสงค์เพื่อช่วยเหลือผู้ใช้ในการป้อนข้อมูลเมื่อตัวควบคุมไม่มีค่า" [และมันจะหายไปทันทีที่ผู้ใช้คลิกเข้าไปใน textarea] มันจะไม่ทำหน้าที่เป็น "ค่าเริ่มต้น" สำหรับการควบคุม หากคุณต้องการคุณต้องใส่ข้อความที่ต้องการไว้ใน<textarea>Here is the actual default value</textarea>คำตอบอื่น ๆ ที่นี่

— JonBrave

10

นี่เป็นทางออกที่อันตรายจริงๆ โปรดอย่าสับสนกับตัวแทนค่าเริ่มต้น

— Qwerty

@Qwerty - ใช่เราไม่ควรสร้างความสับสนกับตัวแทนที่มีค่าเริ่มต้น แต่เป็นอันตราย .... คุณสามารถระบุตัวอย่าง / กรณีใด ๆ ที่ไหนและอย่างไรที่จะเป็นอันตราย (สามารถหรืออาจก่อให้เกิดอันตรายหรือบาดเจ็บ)?

— bhavya_w

1

ตัวยึดจะไม่ส่งแบบฟอร์ม สิ่งนี้เป็นอันตรายหากคุณหรือผู้ใช้ของคุณคาดหวังให้ส่ง

— Qwerty

2

หากค่าไม่ได้รับการส่งมันไม่ใช่ค่าเริ่มต้นแต่เป็นคำใบ้ หากฉันกำลังมองหาค่าเริ่มต้นฉันคาดว่ามันจะทำงานเป็นค่าเริ่มต้นและสิ่งที่เป็นอันตรายคือความจริงที่ว่าสิ่งนี้ไม่ได้แสดงพฤติกรรมที่คาดหวัง อันตรายคือการสมมติวิธีแก้ปัญหานี้จะแก้ปัญหาสิ่งที่ขอ แต่มันเป็นสิ่งที่ถูกต้องสำหรับคุณที่จะคิดว่าฉันกำลังมองหาแน่นอนแต่ขอB และถ้าคุณบอกเป็นนัยว่าในคำตอบของคุณคำตอบของคุณจะถูกต้อง คุณถูกต้องว่านี่เป็นเรื่องเกี่ยวกับการขาดความรู้ แต่คนที่มองหาคำตอบนี้ขาดความรู้นี้

— Qwerty

20

หากคุณต้องการนำข้อมูลจากฐานข้อมูลไปยังแท็ก textarea เพื่อแก้ไข: แท็กอินพุตไม่แสดงข้อมูลที่มีหลายบรรทัด: แถวไม่ทำงาน, อินพุตแท็กคือหนึ่งบรรทัด

<!--input class="article-input" id="article-input" type="text" rows="5" value="{{article}}" /-->

แท็ก textarea ไม่มีค่าแต่ทำงานได้ดีกับ handlebars

<textarea class="article-input" id="article-input" type="text" rows="9" >{{article}}</textarea>

— user2519992
แหล่งที่มา

9

ในกรณีที่คุณใช้Angular.jsในโครงการของคุณ (อย่างที่ฉันเป็น) และมีng-modelชุดสำหรับคุณ<textarea>ให้ตั้งค่าเริ่มต้นเหมือนข้างใน:

<textarea ng-model='foo'>Some default value</textarea>

...จะไม่ทำงาน!

คุณจำเป็นต้องตั้งค่าเริ่มต้นไปยังพื้นที่ข้อความในตัวควบคุมที่เกี่ยวข้องหรือการใช้งานng-modelng-init

ตัวอย่างที่ 1 (โดยใช้ng-init):

แสดงตัวอย่างโค้ด

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  // your controller implementation here
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-init='foo="Some default value"' ng-model='foo'></textarea>
    </div>
  </body>
</html>

ขยายตัวอย่างข้อมูล

ตัวอย่างที่ 2 (ไม่ใช้ng-init):

แสดงตัวอย่างโค้ด

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', [ '$scope', function($scope){
  $scope.foo = 'Some default value';
}]);

<!DOCTYPE html>
<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <meta charset="utf-8">
    <title>JS Bin</title>
  </head>
  <body ng-app='myApp'>
    <div ng-controller="MyCtrl">
      <textarea ng-model='foo'></textarea>
    </div>
  </body>
</html>

ขยายตัวอย่างข้อมูล

— ราหุล Desai
แหล่งที่มา

1

Ay พบstackoverflow.com/a/25391822/2199525นี้- ทำให้สิ่งต่าง ๆ ชัดเจนยิ่งขึ้น

— leymannx

7

หมายเหตุเล็กน้อยและคำอธิบาย:

placeholder='' แทรกข้อความของคุณ แต่จะเป็นสีเทา (ในรูปแบบสไตล์เคล็ดลับเครื่องมือ) และเมื่อคลิกที่ฟิลด์ฟิลด์ข้อความของคุณจะถูกแทนที่ด้วยฟิลด์ข้อความว่างเปล่า
value=''ไม่ใช่<textarea>คุณลักษณะและใช้งานได้กับ<input>แท็กเท่านั้นเช่น<input type='text'>ฉันไม่รู้ว่าทำไมผู้สร้าง HTML5 ตัดสินใจที่จะไม่รวมสิ่งนั้น แต่นั่นเป็นวิธีที่ใช้กันในตอนนี้
วิธีที่ดีที่สุดสำหรับการแทรกข้อความลงใน<textarea>องค์ประกอบได้ถูกกำหนดไว้อย่างถูกต้องที่นี่<textarea> Desired text to be inserted into the field upon page load </textarea>เมื่อ: เมื่อผู้ใช้คลิกที่ฟิลด์พวกเขาสามารถแก้ไขข้อความและยังคงอยู่ในฟิลด์ (ไม่เหมือนplaceholder='')
หมายเหตุ: หากคุณแทรกข้อความระหว่าง<textarea>และ</textarea>แท็กคุณจะไม่สามารถใช้งานได้placeholder=''เนื่องจากข้อความที่คุณแทรกจะถูกเขียนทับ

— twknab
แหล่งที่มา

6

เมื่อฉันทำอะไรแบบนี้มันได้ผลกับฉัน:

<textarea name="test" rows="4" cols="6">My Text</textarea>

— อรุณราช
แหล่งที่มา

4

นอกจากนี้ยังใช้งานได้ดีมากสำหรับฉัน:

<textarea class="form-control" rows="3" name="msg" placeholder="Your message here." onfocus='this.select()'>
<?php if (isset($_POST['encode'])) { echo htmlspecialchars($_POST['msg']);} ?>
</textarea>

ในกรณีนี้ $ _POST ['encode'] มาจากสิ่งนี้:

<input class="input_bottom btn btn-default" type="submit" name="encode" value="Encode">

รหัส PHP ถูกแทรกระหว่างและแท็ก

— winthropite
แหล่งที่มา

3

ตัวยึดตำแหน่งไม่สามารถตั้งค่าเริ่มต้นสำหรับพื้นที่ข้อความ คุณสามารถใช้ได้

<textarea rows="10" cols="55" name="description"> /*Enter default value here to display content</textarea>

นี่คือแท็กถ้าคุณใช้สำหรับการเชื่อมต่อฐานข้อมูล คุณอาจใช้ไวยากรณ์ที่แตกต่างกันหากคุณใช้ภาษาอื่นที่ไม่ใช่ php สำหรับ php:

เช่น:

<textarea rows="10" cols="55" name="description" required><?php echo $description; ?></textarea>

คำสั่งที่ต้องการลดความพยายามในการตรวจสอบช่องว่างโดยใช้ php

— AA
แหล่งที่มา

1

คุณสามารถใช้ this.innerHTML

<textarea name="message" rows = "10" cols = "100" onfocus="this.innerHTML=''"> Enter your message here... </textarea>

ขยายตัวอย่างข้อมูล

เมื่อมีการเน้นพื้นที่ข้อความโดยทั่วไปแล้วมันจะทำให้ innerHTML ของ textarea เป็นสตริงว่าง

— strahd
แหล่งที่มา

-1

โปรดทราบว่าหากคุณทำการเปลี่ยนแปลง textarea หลังจากที่มันได้แสดงผล; คุณจะได้รับค่าที่อัพเดทแทนค่าเริ่มต้น

<!doctype html>
<html lang="en">
    <head>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <script>
            $(function () {
                $('#btnShow').click(function () {
                    alert('text:' + $('#addressFieldName').text() + '\n value:' + $('#addressFieldName').val());
                });
            });
            function updateAddress() {
                $('#addressFieldName').val('District: Peshawar \n');
            }
        </script>
    </head>
    <body>
        <?php
        $address = "School: GCMHSS NO.1\nTehsil: ,\nDistrict: Haripur";
        ?>
        <textarea id="addressFieldName" rows="4" cols="40" tabindex="5" ><?php echo $address; ?></textarea>
        <?php echo '<script type="text/javascript">updateAddress();</script>'; ?>
        <input type="button" id="btnShow" value='show' />
    </body>
</html>

ในขณะที่คุณสามารถเห็นคุณค่าของ textarea จะแตกต่างจากข้อความระหว่างแท็กเปิดและปิดของ textarea ที่เกี่ยวข้อง

— Adeel Raza Azeemi
แหล่งที่มา

-5

คุณยังสามารถเพิ่มแอตทริบิวต์ "value" และตั้งค่าเพื่อให้เป็นดังนี้:


<textarea value="your value"> </textarea>

— monsterpiece
แหล่งที่มา

1

จากเอกสาร MDN : " <textarea>ไม่รองรับvalueคุณสมบัติ"

— Robby Cornelissen

การเขียนใน React มันจะคุ้มค่าที่จะสอดคล้องกับข้อมูลจำเพาะ HTML

— Tomasz Waszczyk