如何使用 javascript 更改 textarea 中的布局打印？答案

【问题标题】：how to change the layout print in textarea with javascript?如何使用 javascript 更改 textarea 中的布局打印？
【发布时间】：2014-02-08 15:59:08
【问题描述】：

大家好，我在我的代码中创建了一个包含随机数的数组。我在 textarea 中打印此数组并精确显示如下：

5,52,5,4,8,4,3,4,8,6,1,4,58,3,4,8,3,1,8

现在我想确保更改文本区域中数字的打印。我希望看到它们是垂直的，特别是：

布局更改必须在用户选择单选按钮时发生事实上，我有：

radio buttons horizontally 
radio buttons vertically

谁知道赐教？

【问题讨论】：

您是否编写了任何代码来尝试完成此任务，或者您只是希望我们为您完成您的工作？

标签： javascript arrays layout textarea

【解决方案1】：

编辑：使用非 jquery 重写。允许在文本字段中添加一些基本文本。

JSFiddle：

http://jsfiddle.net/deEP5/

HTML：

<input id="radio1" type="radio" name="hv" value="horizontal" checked/>Horizontal
<br/><input id="radio2" type="radio" name="hv" value="vertical"/>Veritical   
<br/>
<textarea id="text">Some text, random stuff.

Other text.

</textarea>

JS：

function toggleNumbers(){
    if(this.value == 'horizontal'){
        document.getElementById('text').value = document.getElementById('text').value.replace(/(\d)\n?/g,"$1,").replace(/(\d),(\D)/g,"$1 $2").replace(/(\d),$/g,"$1");  
    } else {
        document.getElementById('text').value = document.getElementById('text').value.replace(/(\d),?/g,"$1\n");                   
    }
}

document.getElementById('radio1').addEventListener('click',toggleNumbers);
document.getElementById('radio2').addEventListener('click',toggleNumbers);     

var arr = [1,2,3,4,5,6,7,8];
document.getElementById('text').value = document.getElementById('text').value + arr.join(",");

CSS

textarea {
    height:200px;
    width:300px;
}

【讨论】：

我没有使用 JQuery。我把 kevin 的代码改成了这个： [code] var numbers = document.getElementById("Textarea").innerHTML.split(","); var 输入 = document.getElementsByTagName("input"); for(var i = 0; i
也许将更新的代码放在原始帖子中的 EDIT 中。我们可以从那里开始工作。
更新了我的代码以支持文本区域中的文本。正则表达式查找逗号分隔的数字列表或换行符分隔的列表并专门对其进行操作，而忽略其他基本文本。
我不明白你的问题？
斯库西。 Tuttavia, il codice Proprio non Riesco a rientrare in miniera。 E il Che Kevin non funziona Perchè C'E Una Parte di testo。 Potreste aiutarmi LIVELLO 语言环境？ Se mi SI Passa il Vostro contatto 聊天 skype Sarei grato。感恩节 ..

【解决方案2】：

HTML

<textarea id="ta">5,52,5,4,8,4,3,4,8,6,1,4,58,3,4,8,3,1,8</textarea>
<input type="radio" name="orientation" value="vertical"/> Vertical
<input type="radio" name="orientation" value="horizontal"/> Horizontal

Javascript

var numbers = document.getElementById("ta").value.split(",");
var inputs = document.getElementsByTagName("input");
for(var i = 0; i < inputs.length; i++){
  inputs[i].onclick=function(){
      document.getElementById("ta").value = (this.value == "vertical") ? numbers.join("\n"):numbers.join(","); 
  }            
}

JS 小提琴： http://jsfiddle.net/88KyJ/1/

【讨论】：