Javascript 将输入类型文本转换为纯文本

我正在处理一个带有1个文本框输入的小html表单，在用户输入任何文本并按下页面末尾的按钮后，我希望将其更改为普通html文本（这样整个页面可以复制粘贴到word文件中，包括文本框中写下的文本）

例如：

<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>

点击

按下按钮后，我希望文本框转换为纯html文本，不再有如下文本框：

这是按下按钮后的示例文本！ 点击

---

我一直在四处寻找，还没有找到一个有效的解决方案，希望有人能帮我解决这个问题

function disable_all() {
 var fs =  $("#fileserver"), span = $( "<span>" + fs.val() + "</span>");
 span.insertAfter(fs);
 fs.remove(); // or fs.hide(); in case you want it later.
}

function disable_all（）{
var fs=$（“#文件服务器”），span=$（“+fs.val（）+”）；
span.插入符（fs）；
fs.remove（）；//或fs.hide（）；以备以后使用。
}

试试：

HTML:

---

这应该对您有所帮助-

有几种方法可以完成您的任务：

解决方案1-

function disable_all()
{
    $('#content').remove();
    $('#fileserver, button').hide();
    $('body').append("<div id='content'>" + $('#fileserver').val() + "</div>")
}

---

从文本字段中提取文本，复制值并将其放入另一个div中可能会更好

<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>

<script type="text/javascript">
    function disable_all() { 
        $('#textToCopy').html($('#fileserver').val());
        $('#fileserver').hide();
    }
</script>

点击
函数disable_all（）{
$（'textToCopy'）.html（$（'fileserver'）.val（））；
$（'#fileserver'）.hide（）；
}

您可以隐藏文本框来执行此操作

<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>

第一个“非jQuery”答案

您的HTML：

<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>

---

如果您正在使用jQUery，这将帮助您，

函数保存（）{
$（'input，textarea'）。每个（函数（）{
var$this=$（this）；
$this.after（“”+$this.val（）+“”）；
$this.remove（）；
})
}

谢谢大家，他们似乎都工作得很好！我明天会试试这个，然后回复你，我会检查这里发布的所有解决方案，再次感谢你！感谢大家提供的优秀解决方案，它们都很有效，我明天将尝试最后的解决方案，看看哪一个效果最好。再次感谢！

function disable_all()
{
   $("body").html($("#fileserver").val());
}

<div id="textToCopy"></div>
<input type="text" id="fileserver">
<button onclick="disable_all();">click!</button>

<script type="text/javascript">
    function disable_all() { 
        $('#textToCopy').html($('#fileserver').val());
        $('#fileserver').hide();
    }
</script>

<input type="text" id="fileserver">
<div id="result"></div>
<button id="btn" >click!</button>

$(document).ready(function(){
    $("#result").hide();  
    $("#btn").click(function(){
        $("#result").text($("#fileserver").val());
        $("#fileserver").hide();
        $("#result").show();
    });
});

<input type="text" id="fileserver">
<div style="display: none;" id="fileserver_text"></div>
<button id="btn">click!</button>

document.getElementById('btn').onclick = disable_all;
function disable_all() {
    var input = document.getElementById('fileserver');
    var disp = document.getElementById('fileserver_text')
    disp.innerHTML = input.value; // get the text from the input and set the div text
    disp.style.display = 'block'; // show the div
    input.style.display = 'none'; // hide the input
}

function save(){
    $('input,textarea').each(function(){
        var $this = $(this);
        $this.after('<span class="value">' + $this.val() + '</span>');
        $this.remove();
    })
}