Question

在简报注册表单中，我想在最终用户点击进入后使电子邮件消失。我已经添加了JS来隐藏和取消隐藏占位符文本。

代码：

<form id="form" action="https://xxxx.com/subscribe/post-json?u=xxx&id=xx&c=?" method="GET">
  <input type="hidden" name="u" value="xxx">
  <input type="hidden" name="id" value="xxx">
  <input id="email" type="EMAIL" autocapitalize="off" autocorrect="off" name="MERGE0" id="MERGE0" size="25" placeholder= "Type your email and press enter">
  <p id="response"></p>
</form>

和JS：

<script >

 var text = document.getElementById("email");  

    text.onfocus = function() {
        if ( text.placeholder == "Type your email and press enter") {
            text.placeholder = "";
        }      
    };    
    text.onblur = function() {
        if ( text.placeholder == "") {
            text.placeholder = "Type your email and press enter";
        }
    };
</script>

我尝试创建一个触发事件的函数，但它仍然没有工作：

 function checkEnter(event)
{
   if (event.keyCode == 13) {text.placeholder = "cool";}
};

你们都能看到我的代码出了什么问题吗？

谢谢。

Answer 1

您需要为输入键添加事件侦听器。你可以删除你的函数 checkEnter 并改为使用它：

document.querySelector('#email').addEventListener('keypress', function (e) {
  var key = e.which || e.keyCode;
  if (key == 13) {
    text.placeholder = "cool";
  }
};

Answer 2

我已将下面的代码与mailchimp表单集成，并获得了预期的结果：

var paragraph = document.getElementById('response');

       $('#form').submit(function(e) {
       var $this = $(this);

       $.ajax({
               type: "GET", // GET & url for json slightly different
               url: "https://xxxxx.com/subscribe/post-json?u=xxxx&id=xxx&c=?",
               data: $this.serialize(),
               dataType    : 'json',
               contentType: "application/json; charset=utf-8",
               error       : function(err) { alert("Could not connect to the registration server."); },
               success     : function(data) {
                   if (data.result != "success") {
                       paragraph.innerHTML = data.msg;
                       text.placeholder = "Oopsy daisy! Error :-("; 
                       form.reset();
                    } else {
                       paragraph.innerHTML = data.msg;
                       text.placeholder = "Thanks so much!"; 
                       form.reset();
                       }
                    }
                  });
                  return false;
                });

提交时触发事件

2 个答案: