0

テキストエリアに入力できる特定のコードがあります。キーを押したときにテキストエリアの幅を増やしています。幅に制限を与えた後、増加を停止する必要があります。私が欲しいのは、幅制限に達すると入力を停止し、ユーザーがEnterキーを押すと再び入力を開始することです。

Heresサンプルコード：

var maindivwidth = $('.maindiv').width();           
var vWidth = 0;
var hIncr = 2;   
var tWidth = $('textarea')[0].value.length;
var iheight = $(dividfortextbox).css('font-size').replace('px','');

$(dividfortextbox).keypress(function(e) {

if ((e.keyCode || e.which) == 13) {

$(this).parent(dividfortext).css('height', (hIncr * iheight) + 'px');
  vWidth = 0;
  hIncr++;
}
else 
{       
    vWidth = (vWidth+1);

 if (tWidth < maindivwidth-aminus && vWidth*9 > tWidth){
 tWidth = vWidth*9;
 $(this).parent(dividfortext).css('width', (tWidth) + 'px');

 }
 else{
    ??????????????????????????
 } 

 }
 });
4

1 に答える 1

1

私があなたを正しければ、これはあなたが探しているものかもしれません: Auto grow text area (jsFiddle)

ユーザーがここでエンターを押して書き込みを続ける必要はありません。テキストエリアは自動的に垂直方向に拡張されます。プロジェクトの性質にもよりますが、これは完全ではありません。-仕事をするかもしれません。このメソッドには jQuery が必要であることに注意してください。ただし、jQuery がなくても実行できることは明らかです。

HTML

<div id="textareaContainer">
   <textarea id="expandTextArea"></textarea>
</div>

CSS

#expandTextArea {
padding:8px 1%;
height:20px;
width:160px;
font-size:16px;
color:#242424;
border:1px solid #333;

/*important for getting the smooth expansion effect*/
-webkit-transition: height 0.6s;
-webkit-transition-timing-function: height 0.6s; 
-webkit-transition: width 0.6s;
-webkit-transition-timing-function: width 0.6s;

overflow:hidden;
}

Jクエリ

$('textarea#expandTextArea').live('keydown', function() {

//insert your values here
var expandTextareaAfter = 20; //characters, grow horizontally
var breakRowAfter = 50; // characters, grow vertically
var fontSize = 16; //textarea fontsize in px

var ta = $("#expandTextArea");
var nrOfLetters = ta.val().length;
var newWidth = (nrOfLetters*9);

//check if textarea is full and expand the textarea horizontally/vertically
if ((nrOfLetters >= expandTextareaAfter) && (nrOfLetters <= breakRowAfter)) {
    ta.css("width", newWidth+"px");
} else if (nrOfLetters > expandTextareaAfter) {
    ta.css("height", ((fontSize+1) * (Math.round(nrOfLetters/breakRowAfter))) + "px");
}
});​
于 2012-11-06T23:00:11.017 に答える