zoukankan      html  css  js  c++  java
  • 跟踪填写表单重复信息

    JavaScript简单实现简单的跟踪填写重复的信息:

    【前期知识准备:需要了解HTML、CSS、JavaScript的基础知识。】

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="UTF-8">
     5         <title>跟踪填写重复的信息</title>
     6     </head>
     7     <body>
     8         <form id="nameShow">
     9             姓氏:<input type="text" id="firstName"  onkeyup="getFirstName()" /><br />
    10             名字:<input type="text" id="lastName"  onkeyup="getLastName()" /><br />
    11             你的名字是:<span id="firstNameSpan"></span><span id="lastNameSpan"></span><br />
    12             <input type="submit" value="提交" onmouseover="getName()"/>&nbsp;<input type="reset" value="重置" />
    13         </form>
    14     </body>
    15     
    16     <script>
    17         var firstName = document.getElementById("firstName");
    18         var lastName = document.getElementById("lastName");
    19         var name2 = document.getElementById("name2");
    20         
    21         function getFirstName(){
    22             document.getElementById("firstNameSpan").innerText = firstName.value.trim()+"_";
    23         }
    24         function getLastName(){
    25             document.getElementById("lastNameSpan").innerText = lastName.value.trim();
    26         }
    27         function getName(){
    28             name2.value = firstName.value.trim() + lastName.value.trim();
    29         }
    30     </script>
    31 </html>

    页面展示:

    ① 初始界面:

    ② 效果展示:

  • 相关阅读:
    SDN课程阅读作业(2)
    2019 SDN上机第5次作业
    第05组 Alpha事后诸葛亮
    第05组 Alpha冲刺(4/4)
    2020-4-5助教一周小结
    2020-3-29助教一周小结
    2020-3-22助教一周小结
    2020-03-15助教一周小结
    2020-03-08助教一周小结
    第一次个人编程作业(个人实现)
  • 原文地址:https://www.cnblogs.com/superdrew/p/9142558.html
Copyright © 2011-2022 走看看