- ベストアンサー
入力ボタンによってtextareaの幅を変更
try { elem_id = event.srcElement.id; } catch ( e ) { elem_id = event.target.id; } if (event.keyCode == 13 || event.charCode == 13) { var m = document.getElementById(elem_id); var r = m.getAttribute("rows"); m.setAttribute("rows", parseInt(r)+1); } else if(event.keyCode == 8 || event.charCode == 8){ var m = document.getElementById(elem_id); var r = m.getAttribute("rows"); if(parseInt(r)>1){ m.setAttribute("rows", parseInt(r)-1); } } 現在、textareaのonkeydownイベントで上の関数を呼び出しているのですがこれを行の先頭でバックスペースを押されたときのみtextareaのrowsを１減らすというようにしたいのですがやり方が分かりません。 例えば、textareaの内容が aa bb といったような場合、bbの前でバックスペースが押されたときのみrowsを１減らしたいのです。 よろしくお願いします。
- shaka001
- お礼率73% (102/139)
- JavaScript
- 回答数5
- ありがとう数3
- みんなの回答 （5）
- 専門家の回答
質問者が選んだベストアンサー
<head>ないに、おかないで、</body>のちょくぜんに、すくりぷと おいておくれ。 <head>ないにおくと、まだてきすとえりあがよみこまれていないのだから えら～になるよ。
その他の回答 (4)
- babu_baboo
- ベストアンサー率51% (268/525)
#3です。ちょっと、しゅうせいします。 ちらつくというか、いちばんしたで、みえたり、きえたり・・・なので while( e.clientHeight < e.scrollHeight && rows < max ) に、してちょ。 いちいち、もじがにゅうりょくされるたびに、へらして ふやして・・・・。こうりつがわるかいなぁ～ ど～～～んと、さくじょすると、１ぎょうずつへっていき・・ そのうちちょうじりがあうってのもしょぼいし
- babu_baboo
- ベストアンサー率51% (268/525)
<textarea cols="40" rows="4" name="" id="p" onKeyup="check();"> </textarea> var Expansion = function ( e, max, min ) { if( 'TEXTAREA' != e.nodeName ) return function ( ) { return false; }; var rows = e.rows; min = 'undefined' === typeof min ? rows: min; return function () { if( min < rows ) e.setAttribute( 'rows', --rows ); while( e.scrollTop && rows < max ) e.setAttribute( 'rows', ++rows ); }; }; var check = Expansion( document.getElementById('p'), 20); ちょっとonkeyupのよびだしかたは、あれだけど、べつあん。
お礼
回答ありがとうございます。 書いていただいたコードの、var Expansion ～の部分からvar check = Expansion～の部分までを<head>内のjavascript宣言部分に、<textarea cols="40"～の部分を<body>内にコピペしてみたのですがうまく動きませんでした。
- yyr446
- ベストアンサー率65% (870/1330)
｛補足｝ 本来のバックスペースの動作も無効にする必要があります。 IEの時：event.returnValue = false; IE以外：event.preventDefault(); 以下の用にすれば一応出来ましたが、ちょっと意図とちがうかも。 それとIEとそれ以外ではonkeydownのタイミングが違ってたかも？ <script type="text/javascript" charset="utf-8"> <!-- function fuga(){ try { elem_id = event.srcElement.id; } catch ( e ) { elem_id = event.target.id; } if (event.keyCode == 13 || event.charCode == 13) { var m = document.getElementById(elem_id); var r = m.getAttribute("rows") m.setAttribute("rows", parseInt(r)+1); } else if(event.keyCode == 8 || event.charCode == 8){ if((document.getElementById(elem_id).value.length % 10)==0){ try { event.returnValue = false; } catch (e) { event.preventDefault(); } var m = document.getElementById(elem_id); var r = m.getAttribute("rows"); if(parseInt(r)>1){ m.setAttribute("rows", parseInt(r)-1); } } } } // --> </script> </head> <body> <textarea id="hoge" rows="20" cols="10" onkeydown="fuga();"></textarea> </body>
- yyr446
- ベストアンサー率65% (870/1330)
テキストエリアの中で入力位置（カーソルの位置）がどこにあるのか 把握するのが困難そうです。入力されたテキストの長さ（文字数）も 文字が入力される度にチェックして、colの長さの整数倍の時だけ、バックスペースキーによるrow削除を有効にすれば出来るのではないかと思います。
お礼
回答ありがとうございます。 やはり、テキストエリア内の入力位置を取得するのは難しいですか。 No.２のコードもありがとうございます。 参考にさせていただきます。
お礼
ありがとうございます。 正常に動きました。