0

DIV タグとフォーム入力フィールドの操作に問題があります。JavaScriptを使用して入力フィールドの値を取得します。Javascript は正常に動作します。入力フィールドの値を取得し、DIV タグに表示します。問題は、長い入力や長い文章を与えるとそのままdivタグに表示されることです。長い一行ではなく、段落の形で表示してほしい。これが私のコードです。

<script>
function myFunc(){
    var str = document.myform.aaa.value;
    document.getElementById('mydiv').innerHTML=str;
}
</script>



<form>
<input type="text" name="aaa" />
<input type="button" value="Post" onclick="myFunc();" >
</form>

<div id="mydiv" width="500px" height="300px">Old text</div>

たとえば、入力を与えると：

hello there, how are you hello there, how are youhello there, how are youhello there.

段落形式ではなく、1 行で表示されます。上記の文を次の形式で表示したい：

hello there, how are you hello there, 
how are youhello there, how are youhello 
there.

私は自分でそれをいくらか整理しました。つまり、スペースを入れて文章を書くとうまくいきますが、スペースのない長い文字列があるとうまくいきません。私が欲しいのは、スペースを入れても入れなくても入力でき、両方の方法で機能するはずです。

4

2 に答える 2

0

css を使用して、属性ではなく属性のwidthandを設定してみてください。height<div>

jsフィドル

<div id="mydiv" style="width: 200px; height: 200px;">Old text</div>

スタイルを作成することをお勧めします。

.comments {
    width: 200px;
    height: 200px;
}

<div id="mydiv" class="comments">Old text</div>

ワードラップを使用して、スペースがない問題を修正します。

word-wrap:break-word
于 2013-01-23T20:27:02.927 に答える
0

これはjavascriptとは関係ありません。デフォルトでは、DIV タグはその親要素の 100% に展開されます。

div の幅を特定のパーセンテージまたはピクセル幅に設定すると、その div の内容はそれに応じて折り返されます。

CSS を使用して幅を定義できますが、設定したい幅を知る必要があります。

#mydiv {
    width:50%; //I just guessed at this number
}

また

#mydiv {
    width:100px; 
}

または、javascript を使用して設定することもできます。(ただし、CSS を使用して設定するのがおそらく最善です)

document.getElementById('mydiv').style = "width:50%';
于 2013-01-23T20:27:52.600 に答える