ミスチルの大名曲の数々が配信決定!! 31日間無料!!【PR】

textareaの一行あたりの文字数を制御、
もしくはカウントすることは可能でしょうか?
(textarea全体の文字数ではありません。)

cols="100"などと一行の文字数を制御しようとしましたが
横のスクロールバーを表示させると(WRAP="off")
どうもうまくいきません。

良い方法をご存知の方がいらっしゃいましたら
よろしくお願いします。

このQ&Aに関連する最新のQ&A

A 回答 (2件)

こんな感じでどうでしょう?細部は調整して下さい


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<title>textareaを各行指定文字数までしか入力できなくする</title>
<script language="JavaScript">
<!--
window.document.onkeypress=lineCheck;
function lineCheck(e){
var ta=document.getElementById("TEXT");
var col=ta.getAttribute("cols");
var lines=ta.value.split("\n");
for(var i=0;i<lines.length;i++){
if(lines[i].length >col){
lines[i]=lines[i].substr(0,col);//各行をcolsで指定した文字数に切り捨てる
}
}
ta.value=lines.join("\n");
}
//-->
</script>
</head>
<body>
<h1>textareaは各行100文字までしか入力できない</h1>
<textarea ID="TEXT" cols="100" rows="10" style="overflow:auto" wrap="OFF">
    • good
    • 0
この回答へのお礼

さっそくのご回答ありがとうございました。
試してみたところ、うまく動作しました!!

お礼日時:2005/04/05 11:23

ちょっとサンプルが切れてしまいました


</textarea></body></html>
をプラスして下さい。
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QTEXTAREAの1行あたりの文字数

お世話になります。
必要にせまられて、TEXTAREAの1行あたりの表示される文字数を25文字に固定したいのですが、自分のPCではきっかり25文字で折り返すのに、他のPCでは26文字数で折り返してしまいます。画面のプロパティのディスプレイの詳細にある、フォントサイズを『大きいフォント』を選ぶか『小さいフォント』選ぶかに原因があるように思われるのですが・・・・どの端末からでも25文字表示できる何か良い方法をご存知の方はおられないでしょうか?スタイルシートで文字間を指定してみましたが、結果は変わらずでした・・・不可能なのでしょうか?・・・・

Aベストアンサー

フォントサイズを変更しても
下記のタグであれば25文字で折り返しますね。

(半角25文字)
<TEXTAREA rows="5" cols="25"></TEXTAREA>

(全角25文字)
<TEXTAREA rows="7" cols="48"></TEXTAREA>

全角の場合は「48」にしないといけないようです。

Qテキストエリアの幅を10桁までにしてスクロールさせないようにしたい

タイトルのままなんですが、可能でしょうか?
<textarea name="textarea" cols="40" rows="10">テスト</textarea>

あと、テキストエリアに<pre>タグをつけると改行が入ってしまい、
1行分テキストエリアから離れてしまいます・・・。
テストタイトル<br>
<pre><textarea name="textarea" cols="40" rows="10">テスト</textarea></pre>

すみません、どなたかわかる方いらっしゃいますか?
教えてください(^^

Aベストアンサー

サンプルを作ってみました。
10行入力されている時に改行が入力できなくなります。IEとFireFoxで動作確認しました。
FireFoxでは、textareaでrows="10"と指定していても9行分しかエリアが確保されないようなのでスクロールバーがでてしまいますが、10行で改行入力が制限されるのは同じです。まあ、その辺は、適当に直せばいいかと存じます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS">
<script language="JavaScript">
<!--
window.document.onkeypress=lineCheck;
function lineCheck(e){
var ta=document.getElementById("TEXT");
var row=ta.getAttribute("rows");
var r=(ta.value.split("\n")).length;
if(document.all){
if(r>=row && window.event.keyCode==13){ //keyCode for IE
return false; //入力キーを無視
}
} else {
if(r>=row && e.which==13){ //which for NN
return false;
}
}
}
//-->
</script>
<title>textareaを10行までしか入力できなくする</title>
</head>
<body>
<h1>textareaは10行までしか入力できない</h1>
<textarea ID="TEXT" cols="40" rows="10" style="overflow:hidden">
</textarea>
</body>
</html>

サンプルを作ってみました。
10行入力されている時に改行が入力できなくなります。IEとFireFoxで動作確認しました。
FireFoxでは、textareaでrows="10"と指定していても9行分しかエリアが確保されないようなのでスクロールバーがでてしまいますが、10行で改行入力が制限されるのは同じです。まあ、その辺は、適当に直せばいいかと存じます。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; char...続きを読む

Q[Javascript]TEXTAREAで改行させるには?

こんにちは。
name="memo" となっている TEXTAREA があるとします。

document.myForm.memo.value = "aaa";
としましたら aaa が TEXTAREA に表示されます。

今回は・・・
aaa
bbb
というように、間に改行を入れて表示させたいと考えています。

"aaa" と "bbb" の間に改行のコマンド的なものを挟めばいいとは思うのですが・・・

わかりません・・・宜しくお願い致します。

Aベストアンサー

こんにちは

document.myForm.memo.value = "aaa\nbbb";
とすれば良いです。
\nは改行コードです。

ご確認ください。

Qtextareaで入力できる文字数を制限したい。

フォームについて質問させてください。

テキストフィールドで、シングルラインならば入力できる文字の最大数を maxlength で指定できるのですが、マルチラインの場合、同様に最大数を指定することはできないでしょうか?

わかるかた、なにとぞご教授ください。

■シングルラインでの文字数制限
<input name="thread_title" type="text" id="thread_title" size="80" maxlength="10">

■マルチライン
<textarea name="text" cols="64" rows="10" id="news_text" maxlength="10"></textarea>

↑上記のようにmaxlength入れても駄目でした。。。涙

Aベストアンサー

スクリプトで制限しないとしょうがないと思います。
参考URLは以前に書いたスクリプトですが参考にして下さい。
制限文字数は、引数で渡してもいいですね。

参考URL:http://okweb.jp/kotaeru.php3?qid=1059274

QTEXTAREAのスクロールバーを消したいのですが

TEXTAREAの大きさに文字数が収まっているうちは、
TEXTAREA内の、縦のスクロールバーが表示されないようにしたいのですが、
そのようにできるのでしょうか?
ご存知の方、教えてください!

Aベストアンサー

スタイルシートでoverflow:autoを設定するだけ大丈夫だと思う。

<style type="text/css">
<!--
textarea {overflow:auto;}
-->
</style>
↑<head>~</head>間に。

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qtextareaで入力した文字を改行したままで表示したいのですが。

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" >
<textarea cols="30" rows="10" name="textN"></textarea>
<input type="button" value=" 確認 " onClick="check()">
</FORM>
<DIV id="test" style="position:absolute;font-size:24px;">
</DIV>
</BODY>
</HTML>

textareaに複数行で入力した文字を改行したままで表示したいのですが
改行されずに表示されます。
改行したままで表示するのはどうすればいいでしょうか?

<HTML>
<HEAD>
<STYLE type="text/css">
<!--
INPUT {font-size: 12px;}
-->
</STYLE>
<SCRIPT language="JavaScript">
<!--
function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
test.innerHTML = strName;
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<FORM name="nform" ...続きを読む

Aベストアンサー

function check(){
var strName;
strName = document.nform.textN.value;
var test = document.getElementById("test");
//一応タグを使えないように置き換える
strName = strName.split("<").join("&lt;");
strName = strName.split(">").join("&gt;");
//改行を改行タグに置き換える
strName = strName.split("\n").join("<br>");
test.innerHTML = strName;
}

Qform input テキストを上下中央に表示したい

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style><!--

form input {
margin-bottom:10px;
color:#fff;
border:none;
font-size:12px;
}

form input.mlmg-text {
width:150px; height:26px;
background-color:green;
padding:2px 5px;
text-align:center;
vertical-align:center;
}

form input.mlmg-buttton {
width:50px; height:30px;
color:#fff; background-color:blue;
vertical-align:bottom;
}
--></style>
</head>

<body>
<form method="post">
<input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい"><input type="button" class="mlmg-buttton" name="join" value="GO"><br />
<input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう"><input type="button" class="mlmg-buttton" name="resign" value="GO">
</form>
</body>
</html>

お世話になります

フォームのテキストボックスに表示する文字(value)を「上下左右中央」にしたいのですが
「上下中央」ができずに困っています(IE6、firefox) ※safari3では中央になりました

以下のhtmlを書いています。
paddingやverticalなど試してみたのですが…
(buttonのvertical-align:bottom;は、これが無いと上へズレてしまうので、書きました。
 これも意味がわかりません。。)

とても基本的なことなのですが
検索しても解決策を見つけられませんでした。よろしくお願いします。

...続きを読む

Aベストアンサー

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>サンプル</title>
<style type="text/css">
<!--
ul.hoge {
list-style: none;
margin: 0;
padding: 0;
}
ul.hoge li {
zoom: 100%;
margin-bottom: 10px;
}
ul.hoge li:after {
display: block;
clear: left;
height: 0;
visibility: hidden;
content: "";
}
ul.hoge input {
float: left;
margin: 0;
padding: 0;
text-align: center;
line-height: 100%;
border: none;
color: #fff;
font-size: 12px;
}
ul.hoge input.mlmg-text {
width: 150px;
height: 1em;
padding: 0.5em;
background-color: green;
}
ul.hoge input.mlmg-buttton {
width: 50px;
height: 2em;
background-color: blue;
}
-->
</style>
</head>

<body>

<form method="post" action="#">
<ul class="hoge">
<li><input type="text" class="mlmg-text" name="user_mail" value="上下中央に配置したい" /><input type="button" class="mlmg-buttton" name="join" value="GO" /></li>
<li><input type="text" class="mlmg-text" name="user_mail_resign" value="上に寄っちゃう" /><input type="button" class="mlmg-buttton" name="resign" value="GO" /></li>
</ul>
</form>

</body>
</html>
----------------------------------------------------------------------
ポイントは以下の様な点です。

・inputをulの子要素としてマークアップ(内容を見たところ、送信ボタンのリストの様ですので)。
・inputの余白や行の高さ等を初期化して、textタイプとbuttonタイプのベースのスタイルを揃える。
・inputをfloatで横並びにさせるので、親要素のliで回り込み状態をクリア。
・textタイプとbuttonタイプの高さを揃える。高さは相対的に計算ができる様にemで指定。
buttonタイプの場合は描画領域の高さに対して自動的にセンタリングされるので2emとし、textタイプの場合は要素(valueの値の文字部分)の高さを1emと考え、残りの1emを半分づつ上下paddingとして追加。

いかがでしょうか?

※今回の場合、"vertical-align: middle;"はinputの描画領域(ボックス)とvalueの値の文字部分との位置関係を示すものではないので、実現したいスタイルの為に適切なプロパティではありません。

少々マークアップから変えてみましたが、以下のサンプルで検証したところ、IE6/7、Firefox2/3、Safari3、Opera9.61等での結果はほぼ同じになりました。
----------------------------------------------------------------------
【サンプル】
----------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" ...続きを読む

Qjavascriptでセレクトボックスの"selected"を動的につ

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
</select>月

<select name='day'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
<option value='11'>11</option>
<option value='12'>12</option>
<option value='13'>13</option>
<option value='14'>14</option>
<option value='15'>15</option>
<option value='16'>16</option>
<option value='17'>17</option>
<option value='18'>18</option>
<option value='19'>19</option>
<option value='20'>20</option>
<option value='21'>21</option>
<option value='22'>22</option>
<option value='23'>23</option>
<option value='24'>24</option>
<option value='25'>25</option>
<option value='26'>26</option>
<option value='27'>27</option>
<option value='28'>28</option>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日


このセレクトボックスに、例えば今日の日付"2010年9月30日"だったら、それぞれの年、月、日の<option>に"selected"をつけたいのですが、javascriptではどのようにして実現したら良いのでしょうか?

よろしくお願いします。

javascriptでセレクトボックスの"selected"を動的につける方法について質問させてください。

現在、以下のようなフォームを作成しました。

<select name='year'>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='1'>1</option>
<option value='2'>2</option>
<option value='3'>3</option>
<option value='4'>4</option>
<option value='5'>5</option>
<option value='6'>6</option>
<option value='7'>7</option>
<option value='8...続きを読む

Aベストアンサー

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<option value='2009'>2009</option>
<option value='2010'>2010</option>
<option value='2011'>2011</option>
</select>年

<select name='month'>
<option value='8'>8</option>
<option value='9'>9</option>
<option value='10'>10</option>
</select>月

<select name='day'>
<option value='29'>29</option>
<option value='30'>30</option>
<option value='31'>31</option>
</select>日
</div>
</form>

こんな感じで・・・

<script>
window.onload=function(){
var f=document.getElementById("f0");
var ymd=new Date();
checkSelect(f.elements["year"],ymd.getFullYear());
checkSelect(f.elements["month"],ymd.getMonth() +1);
checkSelect(f.elements["day"],ymd.getDate());
}
function checkSelect(obj,val){
for(var i=0;i<obj.length;i++){
if(obj[i].value==val){
obj[i].selected=true;
break;
}
}
}
</script>
<form id="f0">
<div>
<select name='year'>
<opt...続きを読む

Qボタンを横に並べて表示させる方法

<input type="button"> ←このボタンを、並べて表示させるにはどうしたら良いでしょうか? (tableは使わない方法で) よろしくお願いいたします

Aベストアンサー

ソースをください。

inputはインライン要素なので改行は入らないです。


このQ&Aを見た人がよく見るQ&A

人気Q&Aランキング