Question

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

作为一个例子：

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

按下按钮后，我想将文本框转换为普通的html文本，不再有这样的文本框：

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

点击！

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

Answer 1

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

http://jsfiddle.net/pYw9P/

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

Answer 3

尝试：

HTML：

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

JS：

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

DEMO

Answer 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

Answer 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

Answer 6

第一个＆＃34;非jQuery＆＃34;回答...

你的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

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

Answer 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>

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

8 个答案: