创建单输出文本区域的多输入

时间:2017-08-27 04:12:09

标签: javascript html

我对Javascript不是很熟悉,我正在研究一个小项目,可以使用一些帮助。从本质上讲,我正在尝试创建一个表单,我可以输入数据的关键点以及文本,而不是将其转换为文本框中的格式以便于复制和粘贴。

<script>
function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;

if (!str)
    return str;

var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : 
'|\\S+?(\\s|$)');

return str.match( RegExp(regex, 'g') ).join(brk);
}

function convert() {
var input = document.getElementById("name").value;
var input = document.getElementById("phone").value;
var input = document.getElementById("sex").value;
var input = document.getElementById("options").value;
var input = document.getElementById("text1").value;
var input = document.getElementById("text2").value;
var input = document.getElementById("text3").value;
input = wordwrap(input, 70, true);

var output = "";

document.getElementById("output").value = output;
}

</script>
<form name="myform" onsubmit="return false;">
Name:<br>
<input type="text" name="name" id="name"><br>
Phone number:<br>
<input type="text" name="phone" id="phone"><br>
Sex?:    
<select name="sex" id="sex">
<option value="man">Male</option>
<option value="woman">Female</option>
</select>
<br>
Options: 
<select name="Options" id="options">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>  
<br>
Text 1:<br>
<textarea name="input" id="text1" cols="70" rows="10"></textarea>
<br>
Text 2:<br>
<textarea name="input" id="text2" cols="70" rows="10"></textarea>
<br>
Text 3:<br>
<textarea name="input" id="text3" cols="70" rows="10"></textarea>
<br>
<input type="button" value="Combine" onclick="convert();"><br>

<textarea name="output" id="output" cols="70" rows="10"></textarea>
</form>

我理想的是甚至要格式化文本的显示方式

名称:输入名称

电话:输入号码

性别:选择性别

选项:选择选项

文字1:输入的文字

文字2:输入的文字

文字3:输入的文字

我似乎无法让输出完全正常运行。我真的很感激任何人都可以提供帮助。

1 个答案:

答案 0 :(得分:1)

也许你不需要wordwrap,事实上你需要捕获单独变量中的所有输入字段并将它们组合成一个输出。

<form name="myform" onsubmit="return false;">
Name:<br>
<input type="text" name="name" id="name"><br>
Phone number:<br>
<input type="text" name="phone" id="phone"><br>
Sex?:    
<select name="sex" id="sex">
<option value="man">Male</option>
<option value="woman">Female</option>
</select>
<br>
Options: 
<select name="options" id="options">
<option value="opt1">Option 1</option>
<option value="opt2">Option 2</option>
<option value="opt3">Option 3</option>
</select>  
<br>
Text 1:<br>
<textarea name="text1" id="text1" cols="70" rows="10"></textarea>
<br>
Text 2:<br>
<textarea name="text2" id="text2" cols="70" rows="10"></textarea>
<br>
Text 3:<br>
<textarea name="text3" id="text3" cols="70" rows="10"></textarea>
<br>
<input type="button" value="Combine" onclick="convert()"><br>

<textarea name="output" id="output" cols="70" rows="10"></textarea>
</form>


<script>

function wordwrap(str, width, brk, cut) {
brk = brk || '\n';
width = width || 60;
cut = cut || false;

if (!str)
    return str;

var regex = '.{1,' +width+ '}(\\s|$)' + (cut ? '|.{' +width+ '}|.+$' : 
'|\\S+?(\\s|$)');

return str.match( RegExp(regex, 'g') ).join(brk);
}

function convert() {
var name = document.getElementById("name").value;
var phone = document.getElementById("phone").value;
var sex = document.getElementById("sex").value;
var options = document.getElementById("options").value;
var text1 = document.getElementById("text1").value;
var text2 = document.getElementById("text2").value;
var text3 = document.getElementById("text3").value;
//input = wordwrap(input, 70, true);

var output = "";

output += "Name: " + name + "\n";
output += "Phone: " + phone + "\n";
output += "Sex: " + sex + "\n";
output += "Options: " + options + "\n";
output += "Text1: " + text1 + "\n";
output += "Text2: " + text2 + "\n";
output += "Text3: " + text3 + "\n";


document.getElementById("output").value = output;

}

</script>