Javascript 输入字段到文本输出_Javascript_Jquery_Html_Text_Input

Javascript 输入字段到文本输出

javascript jquery html text input

Javascript 输入字段到文本输出,javascript,jquery,html,text,input,Javascript,Jquery,Html,Text,Input,我试图做的是创建一个webform，它将把信息放入字段中，添加到预定义的文本中。我目前掌握的守则如下： <form action="" method="post"> <input type="reset" value="Clear"> <p> <input type="text" name="casenumber" value="Case Number" onclick="this.select()" size="25"/> </p>

我试图做的是创建一个webform，它将把信息放入字段中，添加到预定义的文本中。我目前掌握的守则如下：

<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#：此处插入的输入

禁止：此处插入输入

禁止身份验证：此处插入输入

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

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

无法找到如何执行此操作，因此非常感谢您的帮助。

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

练习：

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

<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>


案件编号：
经销商名称：
$（文档）.ready（函数（）{
$（“.copyValue”）.blur（函数（）{
var inputId=$（this.attr（'id'）；
var ident=“span[data inputId=”+inputId+“]”；
$（ident.html（$（this.val（））；
});
});

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

示例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>

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); 
});

JS:

<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>

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); 
});

var a=[
“SFDC-TSO案例编号：”，
“经销商名称：”，
“经销商代码：”，
“CID:”，
“回调：”，
“经销商认证：”，
“电子邮件：”，
“PTN:”，
“禁令：”，
“禁止认证：”，
“请求类型：”，
“采取的行动：”
];
var值=[]；
$（“#提交”）。在（'单击'，函数（）上
{
变量形式=$（'.container'）；
var inputs=form.find（'input'）。not（'.exclude'）；//将此类添加到不希望收集其值的输入中，即清除并提交
var l=输入。长度；
var html=''；
对于（变量i=0；i'；
}
$（'#output'）.append（html）；
});

注意：我在本例中使用了，并稍微清理/更改了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>

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); 
});

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

/**
* 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;
        }

/**
*fId：表单id
*dId：要向其添加文本的div id
**/
函数printToDiv（fId，dId）{
f=document.getElementById（fId）；
i=f.getElementsByTagName（“输入”）；
iTxt=数组（）；
k=0；
out=''；
对于（j=0；j\n”；
}
div=document.getElementById（dId）；
div.innerHTML=out；
}

可以找到或找到一个通用的演示。当然，您可以通过调用函数中的任何其他函数来对数据应用任何验证，也可以通过任何方式调用它，例如，从onsubmit事件。

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

HTML代码（onchange是可选的，我只是喜欢使用它，因为它在文本更改时激活一个函数）

“添加到预定义文本”是什么意思？这个“预定义文本”到底是什么？是文本文件吗？一根绳子？一个物体？其他HTML？我希望输出是底部表单，插入文本字段中输入的所有文本，其中显示“此处插入输入”这样我就可以把它复制粘贴成文本，所以基本上，一旦按下提交按钮，它就会生成所有包含答案的文本，这样我就可以复制粘贴它。这一定需要@MitchBuckley，我知道你对StackOverflow还相当陌生。请下次尝试提供至少你最好的尝试，并解释它到底出了什么问题（你不能期望一个人在没有展示你的努力的情况下为你编写代码）。我明白你的意思，但我真的不明白这是怎么回事，我试着复制你的代码，但它没有输出它，所以不确定怎么做。在我的示例中，输出不是最漂亮的。如果有帮助的话，我可以更新它。但在退出每个文本框后，文本框中任何内容的值都应复制到范围中。因此，没有按钮可按，它应该会自动发生。我也尝试通过刚在我的计算机上打开的本地HTML文件执行此操作，所以我不知道这是否重要，但当文本输入框中时，它不会被复制到文本框中。你是否正在将鼠标移出文本框？如果你只是在那里输入，它就不会复制，你必须鼠标移到外面（或者用tab键或其他什么键）。我做了一把小提琴，这样你可以用更好的格式来检查它@如果这个问题被标记了，那么请尝试始终提供JS版本，或者至少注意，当我查看您的演示时，您的示例使用了jQueryok，这正是我要查找的，但是当我单击“提交”时，它实际上不会生成任何文本。您所说的“生成文本”是什么意思？您是否希望将文本添加到输入值中？我也有更新，注意到。。我犯了一个错误。所以我可能想重新开始