如何通过按钮将字符串输入到字段并显示？

本文旨在解决如何通过HTML表单中的按钮，将文本输入框（input field）中的字符串获取并显示在另一个div元素中的问题。文章将提供一个简洁的HTML表单，包含一个文本输入框和一个按钮。通过JavaScript函数，点击按钮即可将输入框中的文本内容添加到目标div中，并防止页面刷新。本文将详细讲解实现步骤，并提供注意事项，帮助开发者快速掌握该技巧。

实现步骤：

1. HTML 结构：

   首先，我们需要创建包含文本输入框和按钮的HTML表单，以及用于显示文本的div元素。

   
       
   
           
           Enter Serialnumber
       
   
   

   • id="myForm": 为表单指定一个ID，方便后续通过JavaScript操作。
   • type="text": 定义一个文本输入框。
   • id="snfield": 为文本输入框指定一个ID，方便后续通过JavaScript获取其值。
   • value="any text": 设置输入框的默认值。
   • maxlength="20": 限制输入的最大字符数为20。
   • minlength="1": 限制输入的最小字符数为1。
   • required: 表示该输入框为必填项。
   • onclick="addnewSN()": 当按钮被点击时，调用 addnewSN() 函数。
   • : 用于显示输入文本的div元素。

2. JavaScript 函数：

   接下来，我们需要编写 JavaScript 函数 addnewSN()，该函数负责获取输入框中的文本，并将其添加到目标div中。

   function addnewSN() {
       var snFieldValue = document.getElementById('snfield').value;
       document.getElementById('sn').innerHTML += snFieldValue;
       return false; // 阻止表单提交和页面刷新
   }

   • document.getElementById('snfield').value: 获取 ID 为 snfield 的输入框的值。
   • document.getElementById('sn').innerHTML += snFieldValue: 将获取到的值添加到 ID 为 sn 的 div 元素的 HTML 内容中。 += 运算符用于追加文本，而不是替换原有内容。
   • return false;: 关键步骤！ 阻止表单的默认提交行为，防止页面刷新。 如果不阻止默认行为，点击按钮会导致页面重新加载，清空 sn div 中的内容。

3. 阻止表单提交 (两种方法):

   为了防止点击按钮后页面刷新，我们需要阻止表单的默认提交行为。有两种常用的方法：

   

   Buildt.ai

   AI驱动的软件开发平台，可以自动生成代码片段、代码分析及其他自动化任务

   下载

   • 方法一：在按钮的 onclick 事件中返回 false (推荐):

     正如上面的 JavaScript 代码所示，在 addnewSN() 函数的末尾添加 return false;。 这会阻止按钮触发表单的提交行为。

   • 方法二：在

     标签中添加 onsubmit="return false;" 属性:

     
         
     
             
             Enter Serialnumber
         
     

     这种方法会阻止整个表单的提交。 如果表单还有其他需要提交的元素，这种方法可能不适用。

完整代码示例：

    

        

            
            Enter Serialnumber
        
    

    


    

注意事项：

• 确保 JavaScript 代码在 HTML 元素加载完毕后执行。可以将