jQuery - nhập văn bản kích thước tự động (không phải văn bản!)

Question

Làm cách nào để tự động thay đổi kích thước trường nhập = trường "văn bản" bằng jQuery? Tôi muốn nó được như 100px rộng lúc bắt đầu, sau đó làm cho nó tự động mở rộng khi người dùng nhập văn bản ... là có thể?

Answer 1

Dưới đây là một plugin mà sẽ làm những gì bạn đang sau:

Plugin:

(function($){ 

$.fn.autoGrowInput = function(o) { 

    o = $.extend({ 
     maxWidth: 1000, 
     minWidth: 0, 
     comfortZone: 70 
    }, o); 

    this.filter('input:text').each(function(){ 

     var minWidth = o.minWidth || $(this).width(), 
      val = '', 
      input = $(this), 
      testSubject = $('<tester/>').css({ 
       position: 'absolute', 
       top: -9999, 
       left: -9999, 
       width: 'auto', 
       fontSize: input.css('fontSize'), 
       fontFamily: input.css('fontFamily'), 
       fontWeight: input.css('fontWeight'), 
       letterSpacing: input.css('letterSpacing'), 
       whiteSpace: 'nowrap' 
      }), 
      check = function() { 

       if (val === (val = input.val())) {return;} 

       // Enter new content into testSubject 
       var escaped = val.replace(/&/g, '&amp;').replace(/\s/g,' ').replace(/</g, '&lt;').replace(/>/g, '&gt;'); 
       testSubject.html(escaped); 

       // Calculate new width + whether to change 
       var testerWidth = testSubject.width(), 
        newWidth = (testerWidth + o.comfortZone) >= minWidth ? testerWidth + o.comfortZone : minWidth, 
        currentWidth = input.width(), 
        isValidWidthChange = (newWidth < currentWidth && newWidth >= minWidth) 
             || (newWidth > minWidth && newWidth < o.maxWidth); 

       // Animate width 
       if (isValidWidthChange) { 
        input.width(newWidth); 
       } 

      }; 

     testSubject.insertAfter(input); 

     $(this).bind('keyup keydown blur update', check); 

    }); 

    return this; 

}; 

})(jQuery); 

EDIT: Tìm thấy tại: Is there a jQuery autogrow plugin for text fields?

Answer 2

Tôi không nghĩ rằng có một giải pháp hoàn hảo cho vấn đề đó bởi vì bạn không thể phát hiện chiều rộng thực tế của văn bản được nhập vào phần tử đầu vào. Tất cả phụ thuộc vào phông chữ bạn đang sử dụng, cài đặt thu phóng trong trình duyệt, v.v.

Tuy nhiên, nếu bạn có thể chọn phông chữ mà bạn thực sự có thể tính số lượng pixel mà văn bản có (đây là phần khó nhất nhưng tôi đoán bạn có thể cố gắng ước tính nó bằng cách nào đó). Bạn có thể sử dụng điều này để thay đổi độ rộng của trường nhập.

$('input').keyup(function() { 
    // I'm assuming that 1 letter will expand the input by 10 pixels 
    var oneLetterWidth = 10; 

    // I'm also assuming that input will resize when at least five characters 
    // are typed 
    var minCharacters = 5; 
    var len = $(this).val().length; 
    if (len > minCharacters) { 
     // increase width 
     $(this).width(len * oneLetterWidth); 
    } else { 
     // restore minimal width; 
     $(this).width(50); 
    } 
}); 

Answer 3

Theo mặc định, chiều rộng đầu vào được điều khiển bởi size tham số, mà cho type="text" tương ứng với số ký tự rộng nó nên được.

Vì điều này được đo bằng ký tự chứ không phải pixel, kích thước pixel thực tế được điều khiển bởi phông chữ (chiều rộng cố định) được sử dụng.

Answer 4

(được sửa đổi: sử dụng .text() phương pháp thay vì .html() để có được tất cả các định dạng đúng.)

Xin chào Tôi không biết nếu bạn vẫn đang tìm kiếm nhưng tôi đã xem qua điều này khi tôi đang tìm kiếm một kịch bản để làm điều tương tự. Vì vậy, hy vọng điều này sẽ giúp bất cứ ai đang cố gắng làm điều này, hoặc một cái gì đó tương tự.

function editing_key_press(e){ 
    if(!e.which)editing_restore(this.parentNode); 
    var text = $('<span>') 
     .text($(this).val()) 
     .appendTo(this.parentNode); 
    var w = text.innerWidth(); 
    text.remove(); 
    $(this).width(w+10); 
} 

Logic để mã này là để đưa nội dung lên trang trong một khoảng và sau đó được chiều rộng của nội dung này và loại bỏ nó. Vấn đề tôi đã có được với nó là tôi đã có để có được nó để chạy trên cả hai keydown và keyup cho nó để làm việc thành công.

Hy vọng điều này sẽ giúp, Có thể không phải là tôi chỉ làm jquery trong một khoảng thời gian ngắn.

Cảm ơn

George

Answer 5

tôi đã sử dụng seize's answer, nhưng thực hiện những thay đổi:

• giữa thiết isValidWidthChange và // Animate width:

  if (!isValidWidthChange && newWidth > minWidth && newWidth > o.maxWidth) { 
      newWidth = o.maxWidth; 
      isValidWidthChange = true; 
  } 
  

  Bằng cách này, đầu vào sẽ phát triển như lớn như bạn đã cho phép khi nội dung của nó quá lớn để vừa với chiều rộng tối đa.

• Sau $(this).bind('keyup keydown blur update', check);:

  // Auto-size when page first loads 
  check(); 
  

Answer 6

Xem plugin này jQuery: https://github.com/padolsey/jQuery.fn.autoResize

tôi chỉ thử nghiệm nó ra với textareas và nó hoạt động! Hỗ trợ tự động phát triển textareas, input [type = text] và input [type = password].

UPD. Có vẻ như tác giả gốc đã xóa repo khỏi github. Plugin đã không được cập nhật trong một thời gian dài và hóa ra là khá lỗi. Tôi chỉ có thể đề nghị bạn tìm một giải pháp tốt hơn. Tôi đã thực hiện một yêu cầu kéo để plugin này đôi khi trước vì vậy tôi có a copy of it trong tài khoản github của tôi, sử dụng nó chỉ trong trường hợp bạn muốn cải thiện nó, nó không phải là đạn!

Ngoài ra, tôi nhận thấy rằng khung công tác ExtJS đã tự động hóa việc triển khai cho các trường văn bản, hãy xem thuộc tính cấu hình grow. Mặc dù không dễ dàng để khắc một chút logic này ra khỏi khuôn khổ, nó có thể cung cấp cho bạn một số ý tưởng hay về cách tiếp cận này.

Answer 7

Tôi chỉ đang nghĩ về cùng một điều. Textbox nên tự thay đổi kích thước khi người dùng đang viết văn bản vào đó. Tôi không bao giờ sử dụng nó, nhưng tôi có một ý tưởng làm thế nào để làm điều đó. Một cái gì đó như thế này:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
    <head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title></title> 
    </head> 
    <body> 

    <table border="1"> 
    <tr> 
    <td> 
     <span id="mySpan"> 
     <span id="mySpan2"></span> 
     <input id="myText" type="text" style="width:100%" onkeyup="var span = document.getElementById('mySpan2');var txt = document.getElementById('myText'); span.innerHTML=txt.value;"> 
     </span> 
    </td> 
    <td> 
      sss 
    </td> 
    </tr> 
</table> 

    </body> 
</html> 

Answer 8

Tôi có một plugin jQuery trên GitHub: https://github.com/MartinF/jQuery.Autosize.Input

Nó sử dụng phương pháp tương tự như nắm bắt của trả lời nhưng có một số thay đổi đề cập trong các ý kiến.

Bạn có thể thấy một ví dụ sống ở đây: http://jsfiddle.net/mJMpw/6/

Ví dụ:

<input type="text" value="" placeholder="Autosize" data-autosize-input='{ "space": 40 }' /> 

input[type="data-autosize-input"] { 
    width: 90px; 
    min-width: 90px; 
    max-width: 300px; 
    transition: width 0.25s;  
} 

Bạn chỉ cần sử dụng css để thiết lập min/max-width và sử dụng một quá trình chuyển đổi trên chiều rộng nếu bạn muốn có một hiệu ứng đẹp .

Bạn có thể chỉ định khoảng trắng/khoảng cách đến cuối làm giá trị trong ký hiệu json cho thuộc tính tự động nhập dữ liệu trên phần tử đầu vào.

Tất nhiên bạn cũng có thể chỉ là khởi tạo nó bằng cách sử dụng jQuery

$("selector").autosizeInput(); 

Answer 9

Hãy thử mã này:

var newTextLength = Math.floor($("input#text).val() * .80); 
$("input#text").attr("size",newTextLength);