2009-05-08 50 views
86

tôi cần phải thêm một số văn bản đến một lĩnh vực đầu vào ...Nối văn bản để trường nhập

+2

thể trùng lặp của [Có thể làm ".Value + =" trong JQuery?] (Http://stackoverflow.com/questions/1224133/is-it-possible -to-do-value-in-jquery) –

Trả lời

166
$('#input-field-id').val($('#input-field-id').val() + 'more text'); 
+0

Cảm ơn một nhóm! –

+3

Xin vui lòng đọc câu trả lời của tôi về câu hỏi này - Có thực sự là không có lý do để phải gọi '$ ('# đầu vào-lĩnh vực-id')' hai lần ... Rất đơn giản câu trả lời mặc dù - +1 – gnarf

+2

Tôi cảm thấy như có nên là một hàm cộng thêm giá trị của một đầu vào giống như bạn có thể với 'innerHTML'. –

17

Nếu bạn đang có kế hoạch để sử dụng phụ hơn sau đó một lúc, bạn có thể muốn viết một hàm:

//Append text to input element 
function jQ_append(id_of_input, text){ 
    var input_id = '#'+id_of_input; 
    $(input_id).val($(input_id).val() + text); 
} 

Sau khi bạn chỉ có thể gọi nó là:

jQ_append('my_input_id', 'add this text'); 
+0

Tôi không thể thêm trình giữ chỗ vào hộp tìm kiếm và muốn sử dụng hộp này và sau đó xóa hộp khi người dùng đặt con trỏ vào hộp tìm kiếm. Điều này có thể thực hiện được không? – KevinOrin

92

Có hai tùy chọn. Cách tiếp cận của Ayman là đơn giản nhất, nhưng tôi sẽ thêm một lưu ý bổ sung cho nó. Bạn thực sự cần bộ nhớ cache lựa chọn jQuery, không có lý do gì để gọi $("#input-field-id") hai lần:

var input = $("#input-field-id"); 
input.val(input.val() + "more text"); 

Các tùy chọn khác, .val() cũng có thể mất một chức năng như một cuộc tranh cãi. Điều này có advantange của dễ dàng làm việc trên nhiều đầu vào:

$("input").val(function(index, val) { 
    return val + "more text"; 
}); 
+2

Yêu thích 'tùy chọn khác' - bit đẹp của FP. – laher

+1

Đây phải là câu trả lời được chấp nhận btw. – MoniXx

+0

Các ý kiến ​​khác có mùi mát mẻ – Jim

3

\t // Define appendVal by extending JQuery 
 
\t $.fn.appendVal = function(TextToAppend) { 
 
\t \t return $(this).val(
 
\t \t \t $(this).val() + TextToAppend 
 
\t \t); 
 
\t }; 
 
//_____________________________________________ 
 

 
\t // And that's how to use it: 
 
\t $('#SomeID') 
 
\t \t .appendVal('This text was just added')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
<textarea 
 
      id = "SomeID" 
 
      value = "ValueText" 
 
      type = "text" 
 
>Current NodeText 
 
</textarea> 
 
    </form>

Vâng khi tạo ví dụ này tôi bằng cách nào đó có một chút bối rối. "ValueText" vs>Mã hiện tại < Không phải là .val() phải chạy trên dữ liệu của thuộc tính giá trị? Dù sao tôi và bạn tôi có thể làm rõ điều này sớm hay muộn.

Tuy nhiên điểm cho bây giờ là:

Khi làm việc với dữ liệu mẫu sử dụng .val().

Khi giao dịch với các dữ liệu chỉ chủ yếu đọc ở giữa việc sử dụng thẻ .text() hoặc .append() để thêm văn bản.

+1

Điều này có bổ sung gì mới để trả lời câu hỏi tốt hơn không? Tôi hiểu bạn đang thực hiện một phần mở rộng, nhưng điều này đã được trả lời trong một thời gian. Chỉ muốn đảm bảo chất lượng của SO được duy trì. –

+1

Cảm ơn bạn đã quan tâm - Tôi thích điều đó. Nhưng có bạn đúng không có nhiều bản chất mới vẫn như cũ. Tuy nhiên khi tôi tiêu hóa các câu trả lời hiện tại, tôi cảm thấy có thể có một chút về phong cách và thực hiện. Lần đầu tiên tôi kiểm tra xem một số bài đăng có thể được chỉnh sửa hay không, nhưng cuối cùng tôi nghĩ tốt nhất là nên tạo một bài đăng mới. Vì vậy, những gì là mới: * Bạn có thể chạy các snipped. * Phần mở rộng này giúp ích nhiều cho việc viết mã tự viết, trong khi không làm sao lãng quá nhiều bản chất. – Nadu

0
<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
    <style type="text/css"> 
     *{ 
      font-family: arial; 
      font-size: 15px; 
     } 
    </style> 
</head> 
<body> 
    <button id="more">More</button><br/><br/> 
    <div> 
     User Name : <input type="text" class="users"/><br/><br/> 
    </div> 
    <button id="btn_data">Send Data</button> 
    <script type="text/javascript"> 
     jQuery(document).ready(function($) { 
      $('#more').on('click',function(x){ 
       var textMore = "User Name : <input type='text' class='users'/><br/><br/>"; 
       $("div").append(textMore); 
      }); 

      $('#btn_data').on('click',function(x){ 
       var users=$(".users"); 
       $(users).each(function(i, e) { 
        console.log($(e).val()); 
       }); 
      }) 
     }); 
    </script> 
</body> 
</html> 

Output enter image description here

Các vấn đề liên quan