按钮更改为输入电子邮件 onclick jquery答案

【问题标题】：Button change to input email onclick jquery按钮更改为输入电子邮件 onclick jquery
【发布时间】：2018-03-09 09:39:54
【问题描述】：

我想问一下单击后将按钮更改为电子邮件输入字段的问题。按钮的div是：

html

<button class="read-more-button email-button" id="news-button" onClick="addInputField()">Enter your email</button>

功能

function addInputField(){
    var element = document.createElement("input");
    element.setAttribute("type", "email");
    element.setAttribute("value", "");
    element.setAttribute("name", "Email");
    document.body.appendChild(element);
    document.getElementById("news-button").innerHTML = element.value; 
 }

但我从属性element.setAttribute("value", "");得到空值

如何在点击按钮后将其更改为电子邮件输入字段并获取该字段的值？

【问题讨论】：

您将元素值设置为“”，所以当您获得值时，您当然会获得“”。
我要问的是如何改变它。我应该将 value 留空吗？
你需要解释你想要做什么。上面的代码真的没有意义。编辑问题以清楚地解释您要实现的步骤 - 不要只说“我不想要空白值”之类的话，否则您将得不到任何帮助。

标签： javascript jquery input

【解决方案1】：

使用 jQuery，你可以使用 replaceWith() 函数

$('#news-button').click(function(){
      $(this).replaceWith( "<input id='emailAddress' type='email'>" );
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="read-more-button email-button" id="news-button">Enter your email</button>

【讨论】：

谢谢，但它不适用于我的项目，更具体地说，它不会将光标变成要写入的文本。