文本输出的输入字段答案

【问题标题】：Input fields to text output文本输出的输入字段
【发布时间】：2015-07-18 13:10:20
【问题描述】：

我试图做的是创建一个网络表单，它将信息放入字段中以添加到预定义的文本中。我目前的代码如下：

<form action="" method="post">
<input type="reset" value="Clear">
<p>
<input type="text" name="casenumber" value="Case Number" onclick="this.select()" size="25"/>
</p>
<p>
<input type="text" name="name" value="Name" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="dealer code" value="Dealer Code" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="cid" value="CID" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="callback" value="Callback#" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="authentication" value="Dealer Authentication" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="email" value="Email" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="ptn" value="PTN" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="ban" value="BAN" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="banauth" value="Ban Authentication" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="type" value="Type of Request" onclick="this.select()" size="25" />
</p>
<p>
Actions Taken:<br/>
<textarea name="actions" rows="5" cols="50"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>

现在我希望将输入这些字段的所有信息添加到此

SFDC - TSO 案例编号：在此处插入输入

经销商名称：在此处插入输入

经销商代码：在此处插入输入

CID：在此处插入输入

回调#：在此处插入输入

经销商身份验证：在此处插入输入

电子邮件：在此处插入输入

PTN#：在此处插入输入

BAN：在此处插入输入

BAN 身份验证：在此处插入输入

请求类型：在此处插入输入

采取的措施：在此处插入输入

无法找到如何执行此操作，因此不胜感激。

【问题讨论】：

“添加到预定义的文本”是什么意思？这个“预定义文本”到底是什么？是文本文件吗？一个字符串？一个东西？其他 HTML？
我希望输出是底部表单，插入在文本字段中输入的所有文本，其中显示“输入已插入此处”，这样我就可以将其全部复制并粘贴为文本
所以基本上一旦按下提交按钮，它就会生成所有带有答案的文本，以便我可以复制和粘贴它
这个一定需要javascript
@MitchBuckley 我看到你对 StackOverflow 还很陌生。请下次尝试提供至少你最好的尝试，并解释它到底哪里出错了（你不能指望有人为你编写代码而不付出你的努力）。

标签： javascript jquery html text input

【解决方案1】：

如果我理解正确，您想从输入框中获取文本并将其粘贴到其他位置。使用此代码模板：

HTML 代码（onchange是可选的，我只是喜欢用它，因为它会在文本改变时激活一个功能）

<input id="newText" type="text" onchange="myFunction()">
<p>Your text</p><p id="oldText"></p>

JS 代码（“oldText”用作占位符）

function myFunction() {
var inputText = document.getElementById("newText").value;
document.getElementById("oldText").innerHTML = inputText
}

【讨论】：

<input> 是一个void 元素并且不能有结束</input>。
另外，使用你的例子，JS，通过使用document.getElementByID("blabla") 一遍又一遍地选择元素将变得非常难以操作。使用类和循环。
感谢您修复我的代码，@Roko C. Buljan :)。关于类和循环，我本可以这样做，但我只是想获得代码的基础以更清晰。

【解决方案2】：

如果我正确理解您的问题。你可以做这样的事情。但这不是唯一的方法，它只是一种方法。

示例 HTML：

<div class="container">
   <input type="text" value="something"/>
   <input type="text" value="something"/>
   <input type="submit" value="submit" id="submit"/>
</div>
<div id="output"></div>

JS：

var a = [
    "SFDC - TSO Case number:",
    "Dealer Name:", 
    "Dealer code:", 
    "CID:", 
    "Callback#:", 
    "Dealer Authentication:", 
    "Email:", 
    "PTN#:",
    "BAN:",
    "BAN Authentication:", 
    "Type of Request:", 
    "Actions Taken:"
];

var values = [];

$("#submit").on('click', function()
{
    var form = $('.container');
    var inputs = form.find('input').not('.exclude'); // add this class to the inputs you don't want to collect the values of, IE clear and submit
    var l = inputs.length;
    var html = '';

    for(var i = 0; i < l; i++)
    {
       var value = inputs.eq(i).val();
       values.push(value);
    }

    for(var i = 0, ln = a.length; i < ln; i++)
    {
        html += '<p>' + a[i] + ' ' + values[i] + '</p>';
    }

    $('#output').append(html); 
});

注意：我在此示例中使用了jQuery，并稍微清理/更改了 HTML。

演示：

http://jsfiddle.net/prb75qvt/4/

【讨论】：

好的，当我查看您的演示时，这正是我想要的，但是当我点击提交时，它实际上并没有生成任何文本
生成文本是什么意思？您是否希望将文本添加到输入中的值？我也有更新并注意到..我有一个错误。所以可能要重新检查。
我还更新了我的演示和代码以使用 for 循环而不是递减 while 循环。因为这更有意义。通常情况下，时间会更快..我猜是习惯的力量。
当您单击提交按钮时，它不应该将文本生成到输出字段中吗？
它将输入的值生成到输出中。好的，我明白你的意思了。

【解决方案3】：

尝试以下javascript 函数，该函数使用占位符属性为生成的文本生成值的标题：

/**
* fId: the form id
* dId: the div id which want to add the text to it
**/
    function printToDiv(fId, dId){
          f = document.getElementById(fId);
          i = f.getElementsByTagName('input');
          iTxt = Array();
          k = 0;
          out = '';
          for (j = 0; j < i.length; j++){
            if (i[j].type == 'text'){
              iTxt[k] = i[j];
              k++;
            }
          }
          for (n =0; n < iTxt.length; n++){
            out += "<b>"+iTxt[n].placeholder+":</b> "+iTxt[n].value+"<br />\n";
          }
          div = document.getElementById(dId);
          div.innerHTML = out;
        }

可以在here 或here 找到一个通用的DEMO。当然，您可以通过调用相关函数中的任何其他函数来对数据进行任何验证，并且您可以通过任何方式调用它，例如从 onsubmit 事件。

【讨论】：

现在演示也正是我要寻找的，我不知道如何为我在上面寻找的确切字段编写代码
正如我在答案中所考虑的那样，以同样的方式，为函数调用提供表单 id，将 id 属性添加到您的表单，然后创建一个具有指定 id 属性的 div 并将其也提供给函数.此外，您还为输入字段或标题属性指定了占位符属性。但是，title 属性将需要对函数进行少量修改。
这绝对是完美的，唯一的就是用于操作的文本区域，有没有在你点击打印时也可以复制下来？
一直在尝试解决这个问题，但似乎无法弄清楚如何将文本区域添加到打印功能
@sємsєм 有什么理由不使用var？还有iTxt = Array(); 为什么不用var iTxt = []; 甚至是一个更具描述性的名字？

【解决方案4】：

如果您不关心语言，这可以使用 JavaScript 轻松完成。只需将类添加到所有输入并在定义的文本旁边添加一个跨度

<html>
  <head>
    <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
  </head>
  <body>
    <input id='txtCaseNumber' class="copyValue" placeholder="case number"/>
    <input id='txtDealer' class="copyValue" placeholder="Dealer Name"/>
    Case Number: <span data-inputId="txtCaseNumber"></span>
    Dealer Name: <span data-inputId="txtDealer"></span>

    <script>    
       $(document).ready(function(){
          $(".copyValue").blur(function(){              
            var inputId = $(this).attr('id');               
            var ident = "span[data-inputId='" + inputId + "']";             
            $(ident).html($(this).val());           
        });
      });
   </script>
  </body>
</html>

【讨论】：

我明白你的意思，但我不太明白这是如何工作的，我尝试复制你的代码，但它没有输出，所以不太确定该怎么做
在我的示例中，输出不是最漂亮的，如果有帮助，我可以更新它。但是在您退出每个文本框后，文本框中的任何值都应复制到跨度中。所以没有按钮可以按下，它应该自动发生
我也试图从我的计算机上刚刚打开的本地 HTML 文件中执行此操作，所以我不知道这是否重要，但是当文本输入到框中时，它不会被复制到跨度
您是否正在将鼠标移出文本框？如果你只是在那里输入它不会复制你必须鼠标移出（或标签或其他）。我做了一个小提琴，所以你可以用更适合你的格式来检查它。 jsfiddle.net/RVAProgrammer/wktz4g4o
@RVAProgrammer 问题被标记为javascript，因此请务必提供 JS 版本，或者至少注意您的示例使用 jQuery

【解决方案5】：

我认为您必须使用占位符。看：

http://www.w3schools.com/tags/att_input_placeholder.asp
练习：

<form action="" method="POST">
    <input type="text" name="X" placeholder="Some text..." />
</form>

【讨论】：