2011-12-16 5 views
1

私は以下のHTMLコードを用意しています。テキストを含むテキストエリアボックスを基本的にコピーします。IEがtextarea改行を単一のスペースに変換しないようにする方法

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
    <head> 
     <title>Test Page</title> 
     <script type="text/javascript"> 
      function copyTextarea() { 
       var originalTextbox = document.getElementById('originalTextarea'); 
       var copiedTextboxSpan = document.getElementById('copiedTextareaSpan'); 

       var text = originalTextbox.value; 

       copiedTextboxSpan.innerHTML = '<textarea name="myNewTextarea" rows="5" cols="50"></textarea>'; 

       var newTextbox = document.getElementsByName('myNewTextarea')[0]; 
       newTextbox.innerHTML = text; 
      } 
     </script> 
    </head> 
    <body> 
     Enter your text: 
     <br /> 
     <textarea id="originalTextarea" rows="5" cols="50"></textarea> 
     <br /> 
     <input type="button" value="Copy Textarea" onclick="copyTextarea()" /> 
     <br /> 
     Copied text: 
     <br /> 
     <span id="copiedTextareaSpan"></span> 
    </body> 
</html> 

これは私が持っているHTMLの非常に単純化されたバージョンですので、大きな変更を提案しないでください。テキストエリアボックスを作成してテキストを別途設定する必要があります。

このコードは改行文字を除いて、シンプルでうまく動作します。何らかの理由で、Internet Explorer(IE)は常に改行を単一のスペースに変換します。見知らぬ人は、Tomcatサーバー上ではローカルでは起こっていませんでしたが、テストサーバーに展開したときにはうんざりしていました。しかし、テストサーバー上では、Chrome、Firefoxなどで正常に動作しています。

何が起こっているのでしょうか?私はJavaScriptについてあまりよく知らないが、コードを実行するのはブラウザだと思う。しかし、それが本当であれば、IEはなぜローカルに問題はないのですが、テストサーバーに問題がありますか?

答えて

3

は、実際のDOMオブジェクトを作成してみてください:

newTextarea = document.createElement('textarea'); 
newTextarea.setAttribute('name', 'myNewTextarea'); 
newTextarea.setAttribute('rows', '5'); 
newTextarea.setAttribute('cols', '50'); 

copiedTextboxSpan.appendChild(newTextarea); 

var newTextbox = document.getElementsByName('myNewTextarea')[0]; 
newTextbox.value = text; 

また、テキストエリアを扱うときvalueの代わりinnerHTMLを使用しています。

+0

運がない。不思議にも、IEは現在、テキストをコピーしていません。ローカルでうまく動作しますが、サーバー上で新しいテキストエリアの値を設定しようとすると、「未定義」というJavaScriptエラーが表示されます。私はいくつかの警告を出した。サーバー上で、IEは 'getElementsByName'は' [object] 'を返しますが、ローカルでは' [object HTMLCollection] 'を返します。一方、サーバー上のChromeは、[オブジェクトNodeList]だと言っています –

+0

エラーが何であるか分かりません。 jQueryを使用していた場合、ブラウザの不一致が正常に正常化されます。あなたがコードを書き直すのを手伝ってもいいですが、それは文字通り数行であるからです。 – Blender

+0

私はjQueryを知らない。 '$( 'textarea [name = myNewTextarea]')。val(text);'を試しましたが、テキストが表示されませんでした。何か間違っていますか? –

0

あなたはjQueryを使って暮らすことができる場合は、次の

$('#copiedTextareaSpan').replaceWith(function() { 
    var text = $('#originalTextarea').val(); 
    return '<textarea name="myNewTextarea" rows="5" cols="50">' + text + '</textarea>'; 
}); 

コピー(それを作成した後)originalTextareacopiedTextAreaへのテキスト。

関連する問題