Question

我正在努力解决以下问题。我有输入文本元素。我希望用户在那里输入内容，然后他的值显示为普通文本（输入应该消失）。

我搜索了一些解决方案，但没有任何对我有用。我尝试了什么（无论我提供什么功能，我都没有得到任何结果，我应该提供什么来获得我上面描述的效果以及如何实现它？）：

$('input.modified').on('input', function(){
        (this).append('<p>some</p>');
});

OR

$("input.modified").bind("propertychange change keyup paste input", function(){
    $(this).append("<p>dgdgd</p>");
});

OR

$("input.modified").change(function(){
           $(this).css("visibility","hidden");
 }); //end change function

如何使像.on（）或.change（）这样的函数与我的代码一起使用？

感谢所有答案，但我无法将您的示例移到我的代码中：（

请验证我错过了什么：

[http://jsfiddle.net/w6242/][1]

Answer 1

选中 DEMO

<强> HTML ：

<input class="modified" type="text"/>
<p></p>

<强> JS ：

$("input.modified").change(function(){
           $('p').html($(this).val());
           $(this).css("visibility","hidden");
});

Answer 2

检查这个

Fiddle

$("#in").focusout(function(e){
$("span").html(($("#in").val()));
           $(this).hide();
 });

Answer 3

这里有一个小提琴http://jsfiddle.net/keypaul/NsWC5/5/

HTML

<div id="wrapper">
    <input type="text" id="writer" />
    <a href="#" id="submit">send</a>
</div>

JQuery的

$("#submit").click(function(e){
    var txt = $("#writer").val();
    $("#writer").fadeOut(400);
    $("#submit").fadeOut(400, function(){
        $("#wrapper").append('<div id="text">' + txt + '</div>').hide().fadeIn(600);
    });
    e.preventDefault();
});

如果你需要使用onther事件（而不是点击提交），你可以使用onchange或focusout应用于你的输入元素

Answer 4

最简单的，假设确实想要替换input：

$('#demo').on('keyup', function(e){
    if (e.which === 13) {
        var p = $('<p />', {
            text : this.value
        });
        $(this).replaceWith(p);
    }
});

JS Fiddle demo

或者，要插入相邻的元素，只需隐藏input：

$('#demo').on('keyup', function(e){
    if (e.which === 13) {
        var span = $('<span />', {
            text : this.value
        });
        $(this).hide().after(span);
    }
});

JS Fiddle demo

上面的jQuery使用以下演示HTML：

<input id="demo" type="text" />

参考文献：

jQuery更改输入值并将其显示为文本

4 个答案: