2012-03-24 88 views
0

我有這個簡單的textarea。當它沒有被選中時,我希望它看起來像一個完成的產品(即文本的兩側逐漸變細)。我也想讓用戶改變寬度。我如何使用autoresize插件來做到這一點?試圖使用autoResize

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <title>Pathway Builder</title> 
    <link rel="stylesheet" href="style.css" type="text/css" /> 
</head> 
<body> 

    <textarea class="text_field_not_selected"></textarea> 

    <script src="jQuery.js" type="text/javascript"></script> 
    <script src="selectors.js" type="text/javascript"></script> 
</body> 
</html> 

的JavaScript/jQuery的

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

CSS

body { 
    display: block; 
} 

textarea:focus { 
    outline: none; 
    text-align: center; 
} 

.text_field_not_selected { 
    text-align: center; 
    -moz-border-radius: 10px; 
    -webkit-border-radius: 10px; 
    -moz-box-shadow: 0px 3px 5px #444; 
    -webkit-box-shadow: 0px 3px 5px #444; 
    padding: 5px; 
} 

回答

0

的第一部分,你可以使用類似

border-style: none; 

和第二部分你可以點擊並拖動右下角的文本框並調整其大小

+0

我不希望用戶能夠控制大小。我知道我有點在標題中說的相反,但我真正想要的是將高度:寬度比自動調整爲大約2:3。 – mharris7190 2012-03-24 02:29:40