人に聞けない痔の悩み、これでスッキリ >>

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

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

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

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

A 回答 (5件)

サンプルを作ってみました。


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>
    • good
    • 0
この回答へのお礼

BLUEPIXYさん天才ですね!!
完璧です!!

どうもありがとうございました~!

お礼日時:2005/03/30 10:39

> <textarea name="textarea" cols="40" rows="10" size="10" maxlength="10">テスト</textarea>



textarea に size とか maxlength とかいう属性はありません。嘘を教えないで下さい。

HTML だけでは textarea のスクロールなどに関して細かい制御はできないので、スタイルシートやスクリプトを使う必要があります。

しかし、pre の中に textarea を入れるのもそうですが、いまいち質問者さんがやりたいことがよく分かりません。《最終的に》何を目標としているのか分かればもう少しまともなアドバイスができるのですが。

参考URL:http://www.ne.jp/asahi/minazuki/bakera/html/refe …

この回答への補足

すみません、<pre>の件とスクロールの件は
まったく別なので気にしないで下さい。。

ずばりこれが知りたいです~!
>HTML だけでは textarea のスクロールなどに関して>細かい制御はできないので、スタイルシートやスク>リプトを使う必要があります。

補足日時:2005/03/29 19:07
    • good
    • 0

サイズ固定とはどういうことですか?

この回答への補足

説明がヘタですみません。。

たとえばテキストエリアを改行5回分の高さに固定して
6回以上改行できないようにしたいんです。
テキストエリアのrowsを"5"にしても4回目の改行で
スクロールバーが出てしまいます。

補足日時:2005/03/29 18:21
    • good
    • 0

No.1です。



<textarea name="textarea" cols="40" rows="10" size="10" maxlength="10">テスト</textarea></pre>

これでどうですか?
    • good
    • 0
この回答へのお礼

<pre>タグは成功しました!
ありがとうございました!

あとはサイズを固定できれば・・・

お礼日時:2005/03/29 18:08

<textarea name="textarea" cols="40" rows="10" maxlength="5">テスト</textarea>



これでどうですか?

この回答への補足

これではたくさん改行したときにスクロールして
しまいますよね?
やっぱり不可能なのでしょうか・・・

補足日時:2005/03/29 17:13
    • 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[Javascript]TEXTAREAで改行させるには?

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

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

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

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

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

Aベストアンサー

こんにちは

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

ご確認ください。

Qテキストエリアの行文字数の固定について

現在、HTMLを作成しているのですが、
画面で入力した情報を取得して、
PDFに反映させるといったことをしています。

そこで、テキストエリアに入力したままを
PDFに出力する箇所があるのですが、
テキストエリアのcolsで指定したバイト数よりも
全角文字が多く入ってしまうので、
PDFと画面で若干ずれが生じています。

現在はcols88でフォントはMSゴシックを指定しています。
この場合ですと、1バイト文字()は88バイト(88文字)入るのですが、
2バイト文字(全角文字)だと94バイト(47文字)
入ってしまいます。
フォントはゴシックとほぼ同じ種類だったら
問題ないので、フォントで対応できる場合も
ご教授ください。
又、この問題はどうしようもない問題とご存知でしたら、
そちらもご教授ください。
よろしくお願い致します。

Aベストアンサー

「MS ゴシック」が、完全な等幅フォントではない(全角と半角の名場が異なる)ことが原因です。
ただし、フォントサイズが 1.5 の倍数の時には、完全な等幅になるようなので、フォントサイズを 12 あたりに設定してやるとよいでしょう。

 <TEXTAREA style="font:12px 'MS ゴシック'" cols="88"></TEXTAREA>

このようにしておけば、全角/半角が混じっても、88バイト分しか入らなくなります。

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" ...続きを読む

Qtextareaの一行の文字数制御

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

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

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

Aベストアンサー

こんな感じでどうでしょう?細部は調整して下さい
<!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">

こんな感じでどうでしょう?細部は調整して下さい
<!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");
fo...続きを読む

QリンクでPOSTデータを送信することは可能ですか?

はじめまして。
Submitボタンを使用せずに<A>リンクでFORMのPOSTメソッドデータを送信することは可能でしょうか?
やはりURLにデータを付加して送信するしかないのでしょうか?
ご教授よろしくお願い致します。

Aベストアンサー

javascript を使えば可能です。大雑把にはこんな感じ。

・パラメータが全部 hidden な form を記述しておく(ブラウザでは表示されない)
・<a href> では、その form を submit するように javascript を記述する

試してないですけど、こんな感じ。

<form name=f method=POST action="http://どこか">
<input type=hidden name=x1 value=v1>
</form>

<a href="javascript:document.f.submit()">リンクから submit</a>

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;
}

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

QTEXTAREAからのデータを改行入りで表示したい

urizakaです。
さて現在、Tomcat+PostgreSQL+JavaでDBから持ってきたデータを
一度TEXTAREAに代入し、そこでデータの修正を行った後に、その修正
データを次の画面で表示するというプログラムを組んでいるのですが、
このTEXTAREAで入力したデータが、次の画面での表示の際にうまく
改行してくれません(改行なしで表示されます)。Tomcat上ではうまく
改行されて表示されているのですが・・・。
 いったいどうすれば、Web画面上でもうまく改行してくれるのでしょう?
「ソースコード(最初のページ)」
(前略)
<form name="form2" method="post" action="MContConf.jsp">
<p><font size="3"><b><font size="5">[改定]</font></b></font><BR>
<BR><TEXTAREA NAME="Cont2" ROWS="20" COLS="100" WRAP="hard">
 <%=mcont%></TEXTAREA></p>
<input type="submit" name="submit" value="上記フォームで送信">
</form>
(後略)

「ソースコード(次の画面)」
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=EUC-JP">
<%@ page contentType="text/html; charset=EUC_JP" %>
<%@ page import="BasisBean,java.util.*" %>
<jsp:useBean id="Basisbean" class="BasisBean">
<% //↓文字化け対策
String Content = Basisbean.cSet(request.getParameter("Cont2"));
//↓これでTomcatに表示させると、Tomcat上では改行して表示する
System.out.println("answer : " + Content);
%>
<html><body bgcolor="#FFFFFF" text="#000000">
<p align="center"><b>以下のような内容で送信します。</b></p>
<p><b><font size="4"><%=Content%></font></b></p></body>
</jsp:useBean></html>
Java環境はJ2SDK1.4です。
すみませんが、ご存知の方、よろしくお願いします。

urizakaです。
さて現在、Tomcat+PostgreSQL+JavaでDBから持ってきたデータを
一度TEXTAREAに代入し、そこでデータの修正を行った後に、その修正
データを次の画面で表示するというプログラムを組んでいるのですが、
このTEXTAREAで入力したデータが、次の画面での表示の際にうまく
改行してくれません(改行なしで表示されます)。Tomcat上ではうまく
改行されて表示されているのですが・・・。
 いったいどうすれば、Web画面上でもうまく改行してくれるのでしょう?
「ソースコード(最初のページ)」
...続きを読む

Aベストアンサー

申し訳有りません。自己レスです

>もしWindowsならばcrlfなので\r\nとなります。
>ですので\rのみ変換しても改行されてしまうと思われますがどうでしょう??
>replaceはchar単位での変換なのでindexOf等を使い変換ロジックを組んで
>見ればどうでしょうか??

replaceで変換されているのは\nでしたね。申し訳ありません。
ですが、replaceではchar単位での変換となるので、"<br>"という
文字列は変換できません。やはりindexOfを使うしかないと思います。

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

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

Aベストアンサー

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

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


人気Q&Aランキング