autosize textarea寬度（cols）？

我正在爲用戶製作一個web應用程序來創建一個簡單的orgchart。我甚至沒有連接節點的線路，但我正在使用文本區域。我發現了一個非常有用的autosize（）插件，當寬度被佔用時，它非常適合添加額外的行。有沒有辦法做到這一點，如果用戶只使用一行，autoresize會縮小寬度以環繞文本？autosize textarea寬度（cols）？

我試圖弄清楚如何做jsfiddle，但我不知道如何添加多個javascript（插件），所以我只是把我的jQuery代碼放在插件的底部，並把該插件在JavaScript的區域在jsfiddle

HTML

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Pathway Builder 2.0</title> 
    <link rel="stylesheet" href="PathwayBuilder2.css" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.13/jquery-ui.min.js"></script> 
    <script src="PathwayBuilder2.js" type="text/javascript"></script> 
    <script src="plug-ins/autosize.js" type="text/javascript"></script> 
</head> 




<body> 
    <div id="Pathway"> 
     <div class="whole"> 
      <div class="text_display"> 
       <textarea class="text_field_not_selected"></textarea><br /> 
       <input type="button" class="add_child" value="+" /> 
      </div> 
     </div> 
    </div> 
</body> 
</html>

的javascript/jquery的

$(document).ready(function() { 
    $('textarea').autosize(); 
}); 

$(document).ready(function() { 
    $('.add_child').live({ 
     click: function() { 
      var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>'; 
      $(this).closest('.whole').append(new_child); 
      $('.text_field_not_selected').autosize(); 
     } 
    }); 
}); 

$('textarea').live('focusin blur', function() { 
    $(this).toggleClass('text_field_not_selected'); 
});

CSS

body { 
    margin: 0px; 
    padding: 0px; 
    text-align: center; 
} 
#pathway { 
    display: block; 
} 
.whole { 
    text-align: center; 
    display: inline-block; 
    vertical-align: top; 
    margin-left: auto; 
    margin-right: auto; 
    padding: 10px; 
} 
textarea { 
    min-width: 2em; 
    text-align: center; 
} 
textarea:focus { 
    resize: none; 
} 
.text_field_not_selected { 
    resize: none; 
    border-radius: 10px; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    box-shadow: 0px 3px 5px #444; 
    -moz-box-shadow: 0px 3px 5px #444; 
    -webkit-box-shadow: 0px 3px 5px #444; 
} 
.add_child { 
    margin-bottom: 25px; 
}

來源

2012-04-12 mharris7190

在這裏你去工作演示：http://jsfiddle.net/YVEhr/30/（更貼切）或http://jsfiddle.net/YVEhr/1/

請讓我知道，如果那是你想要什麼，我很樂意幫忙。（即調整想法）:)

編輯 Okies我現在得到它（Phew）請隨時與CSS一起玩，或者你可以有'行=東西'開始與，我分享了一些鏈接以獲得進一步的幫助。 :)

演示http://jsfiddle.net/YVEhr/30/

調整大小的文本區域以適應屏幕：好的鏈接：或你也可以看看這個男人：http://archive.plugins.jquery.com/project/TextFill

jQuery代碼

//inital resize 
resizeTextArea($('textarea')); 

//resize text area 
function resizeTextArea(elem){ 
    // alert(elem[0].scrollHeight + ' ---- ' + elem[0].clientHeight); 
    elem.height(1); 
    elem.scrollTop(0); 
    elem.height(elem[0].scrollHeight - elem[0].clientHeight + elem.height()); 
} 

//'live' event 
$('textarea').live('keyup', function() { 
    var elem = $(this); 
    // alert('foo'); 
    //bind scroll 
    if(!elem.data('has-scroll')) 
    { 
     elem.data('has-scroll', true); 
     elem.bind('scroll keyup', function(){ 
      resizeTextArea($(this)); 
     }); 
    } 

    resizeTextArea($(this)); 
});

請讓我知道，如果這就是你想要的。

說明

只需要新etxtareaclass結合.autosize()功能和休息，你可以看到它的jsfiddle。

不要忘記接受的答案&，如果你喜歡，你可以使用此解決方案，而無需使用任何插件：jQuery - Building an AutoResizing TextArea that Doesn't Flash on Resize

Anywho這會工作，希望這有助於和有一個很好的一個，乾杯！

jQuery代碼

$(document).ready(function() { 

    $('.add_child').live({ 
     click: function() { 
      var new_child = '<div class="whole"><div class="text display"><textarea class="text_field_not_selected"></textarea><br /><input type="button" class="add_child not_visable" value="+" /></div></div>'; 
      $(this).closest('.whole').append(new_child); 
      $('.text_field_not_selected').autosize(); 
     } 
    }); 
});

來源

2012-04-12 04:18:02

除了追加HTML到DOM，你的論文是'的jQuery（ 'textarea的'）自動調整大小（）;'？ – dwerner 2012-04-12 04:21:40

Hiya @dwerner我加了'$（'。text_field_not_selected'）。autosize（）;'當它們被追加時調整其他文本區域的大小:)，我有沒有**或**瞭解任何錯誤。請讓我知道我會糾正它，歡呼回覆的人！ – 2012-04-12 04:23:37

Hiya @dwerner saweet男士感謝您的評論幫助我重新檢查需要什麼，並進行了更改，以便textarea將自動調整大小。任何人都讓我知道。再次感謝人！ ** + 1 **，歡呼聲 – 2012-04-12 05:15:44

autosize textarea寬度（cols）？

回答

相關問題