如何使用 JavaScript 更改布局打印在文本区域中



大家好,在我的代码中,我创建了一个带有随机数的数组。我在文本区域中打印此数组,并精确地显示如下:

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

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

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

谁知道开导我?

编辑:使用 non-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,"$1n");                   
    }
}
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;
}

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

爪哇语

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/

最新更新