Làm cách nào để tạo một hộp văn bản mở rộng?

Tôi muốn tạo một sách giáo khoa nơi nó bắt đầu dưới dạng chiều rộng/chiều cao đã cho. Sau đó, nếu người dùng nhập nhiều hơn thì lượng không gian đã cho, hộp văn bản sẽ mở rộng xuống dưới. Làm thế nào để tôi làm việc này? Tôi có sử dụng CSS không? Hộp văn bản cơ bản chỉ hiển thị thanh cuộn khi người dùng vượt qua số hàng cho phép. Làm thế nào để làm cho nó để hộp văn bản mở rộng các hàng bằng cách nói 5 nhiều hơn?Làm cách nào để tạo một hộp văn bản mở rộng?

<form method="post" action=""> 
<textarea name="comments" cols="50" rows="5"></textarea><br> 
<input type="submit" value="Submit" /> 
</form>

Làm cách nào để sử dụng ví dụ mà Robert Harvey đã đề cập? Tôi không bao giờ sử dụng JavaScript trước ..

Nguồn

2010-05-27 jpjp

jQuery Plugin AutoResize
http://james.padolsey.com/javascript/jquery-plugin-autoresize/

bước để sử dụng:

Bạn cần jQuery. Để thêm nó vào trang của bạn:

<script type="text/javascript" 
    src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

Sau đó, tải xuống plugin và đặt nó vào cùng thư mục với trang web của bạn. Để tham khảo nó, thêm video này vào trang web của bạn:

<script type="text/javascript" 
    src="autoresize.jquery.js"></script>

Tiếp theo, thêm một textbox vào trang của bạn:

<textarea id="comment" style="width: 400px; padding: 10px; height: 50px; 
    display: block; font-family:Sans-serif; font-size:1.2em;"> 
    Type something in here, when you get close to the end the box will expand! 
</textarea>

Cuối cùng, trong một khối kịch bản, thêm mã mà móc lên plugin hộp văn bản:

<script type="text/javascript"> 
    $('textarea#comment').autoResize({ 
     // On resize: 
     onResize : function() { 
      $(this).css({opacity:0.8}); 
     }, 
     // After resize: 
     animateCallback : function() { 
      $(this).css({opacity:1}); 
     }, 
     // Quite slow animation: 
     animateDuration : 300, 
     // More extra space: 
     extraSpace : 40 
    }); 
</script>

Nguồn

2010-05-27 20:31:57

o đó là tuyệt vời. đúng thứ tôi cần!! – jpjp

Tôi xin lỗi nhưng tôi chưa bao giờ sử dụng jquery trước đây. bạn có thể cho tôi biết cách làm việc này không? Tôi đã tải xuống các mã và đặt chúng trong . Nhưng hộp văn bản vẫn giống nhau – jpjp

Đây là video hướng dẫn tốt: http://www.youtube.com/watch?v=Hk5oXFtYLwE Hoặc bạn có thể đọc tài liệu về jQuery: http://docs.jquery.com/Hướng dẫn: Getting_Started_with_jQuery – mVChr

Bạn có thể thêm thư viện nếu bạn quan tâm hoặc chỉ theo dõi thuộc tính scrollTop của văn bản.

Nếu scrollTop không bằng 0, hãy thêm hàng của bạn.

<!doctype html> 
<html lang= "en"> 
<head> 
<meta charset= "utf-8"> 
<title>Expand textarea </title> 
<style> 
textarea{overflow-y:scroll} 
</style> 
<script> 
onload=function(){ 
    var who=document.getElementsByName('comments')[0]; 
    who.onkeyup=function(){ 
     if(who.scrollTop)who.rows=parseInt(who.rows)+5; 
    } 
} 
</script> 
</head> 
<body> 
<textarea name="comments" cols="50" rows="5"></textarea> 
</body> 
</html>

Nguồn

2010-05-27 21:50:59 kennebec

Đẹp, đơn giản và ít thư viện nhưng vẫn cần nhiều công việc; [fiddle] (http://jsfiddle.net/h7jmmwcv/). Dán bằng chuột (keyup không được gọi), nhập văn bản từ trên cùng (scrolltop không thay đổi), xóa văn bản (chiều cao không giảm), thanh cuộn vô dụng gây phiền nhiễu hiển thị là một vài trong số những điều ngăn tôi không muốn sử dụng nó – Hashbrown

Đây là my solution chỉ sử dụng vani javascript.
Được thử nghiệm để hoạt động trong Chrome, Firefox & IE8 trở lên.

On tải, hoặc Whack nó trong một hàm:

var element = document.getElementById('comments'); 
var retractsAutomatically = false; 

var sizeOfOne = element.clientHeight; 
element.rows = 2; 
var sizeOfExtra = element.clientHeight - sizeOfOne; 
element.rows = 1; 

var resize = function() { 
    var length = element.scrollHeight; 

    if (retractsAutomatically) { 
     if (element.clientHeight == length) 
      return; 
    } 
    else { 
     element.rows = 1; 
     length = element.scrollHeight; 
    } 

    element.rows = 1 + (length - sizeOfOne)/sizeOfExtra; 
}; 

//modern 
if (element.addEventListener) 
    element.addEventListener('input', resize, false); 
//IE8 
else { 
    element.attachEvent('onpropertychange', resize) 
    retractsAutomaticaly = true; 
}

CSS & HTML:

textarea#comments { overflow:hidden; }

<textarea id="comments" cols="50" rows="1"></textarea>

Nguồn

2014-12-30 01:20:30 Hashbrown

Làm cách nào để tạo một hộp văn bản mở rộng?

Trả lời

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