js控制的双击HTML文本变为input输入

尝试用js控制的双击HTML文本变为input输入，目前代码为下:

<span ondblclick="exInput(this)">变成输入框</span>


<script>
        function exInput(element) {
            var text = element.innerText;

            var input = document.createElement('input');
            input.type = 'text';
            input.value = text;
            input.className = 'hidden-input';

            element.parentNode.insertBefore(input, element);

            element.style.display = 'none';

            input.focus();

            input.addEventListener('blur', function() {

                var newValue = input.value;

                element.innerText = newValue;

                element.style.display = 'inline-block';

                input.parentNode.removeChild(input);
            });
        }
    </script>

但是双击之后并非变成input输入框而是文字直接消失，请问错在哪里应该如何修改，谢谢！

chrome测试了正常，题注什么浏览器？

这里如有帮助给个采纳谢谢

您好，我是有问必答小助手，您的问题已经有小伙伴帮您解答，感谢您对有问必答的支持与关注！
PS：问答VIP年卡 【限时加赠：IT技术图书免费领】，了解详情>>> https://vip.csdn.net/askvip?utm_source=1146287632不知道你这个问题是否已经解决, 如果还没有解决的话:

• 你可以看下这个问题的回答https://ask.csdn.net/questions/7589150
• 这篇博客也不错, 你可以看下js正则判断输入框input只能是数字或者英文 判断input输入类型
• 除此之外, 这篇博客: js限制input输入框只能输入数字中的 在移动端中可以这样: 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:
  

  在input标签指定pattern属性，表示对输入的东西进行验证。此处是只能输入数字。

  <input type="number" pattern="[0-9]*" />
  

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^