将输入类型文本转换为纯文本答案

【问题标题】：converting input type text to plain text将输入类型文本转换为纯文本
【发布时间】：2014-05-05 22:37:13
【问题描述】：

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

举个例子：

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

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

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

点击！

我一直在寻找，但尚未找到可行的解决方案，希望有人能帮助我

【问题讨论】：

感谢大家提供的出色解决方案，它们都有效，我明天将尝试最后一个，看看哪个效果最好。再次感谢！

标签： javascript jquery html

【解决方案1】：

$('button').click(function(){
    $('body *').replaceWith(function(){
        return this.value || this.innerHTML;
    });
});

http://jsfiddle.net/pYw9P/

【讨论】：

【解决方案2】：

我认为应该这样做。

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.
}

【讨论】：

【解决方案3】：

试试：

HTML：

<input type="text" id="fileserver">
<button id="but">click!</button>

JS：

$( "#but" ).click(function() {
     var text=$( "#fileserver" ).val();
     $( "body" ).html(text);
});

DEMO

【讨论】：

【解决方案4】：

这应该对你有帮助 -

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

解决方案 1 -

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

Working Fiddle

解决方案 2 -

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

Working Fiddle

【讨论】：

谢谢大家，他们似乎都工作得很好！

【解决方案5】：

你可以这样做隐藏文本框

<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();
    });
});

demo

【讨论】：

【解决方案6】：

第一个“非 jQuery”答案...

你的 HTML：

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

你的 Javascript：

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
}

JSFiddle

【讨论】：

【解决方案7】：

如果您使用的是 jQUery，这将对您有所帮助， http://jsfiddle.net/DCak6/

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

【讨论】：

【解决方案8】：

您最好从文本字段中获取文本，复制值并将其放入另一个 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>

【讨论】：

我明天要试试这个并回复你，我正在检查这里发布的所有解决方案，再次感谢你！