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

jQuery change value of input and display it as text

本文关键字：显示 文本 改变 输入 jQuery      更新时间：2023-09-26

我正在努力解决以下问题。我有一个输入文本元素。我希望用户在那里输入一些东西，然后他的值显示为正常文本(输入应该消失)。

我寻找了一些解决方案，但没有一个对我有效。我所尝试的(无论我提供什么函数，我都没有得到结果，我应该提供什么来获得我上面描述的效果以及如何实现它?):

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

或

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

或

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

如何使函数像。on()或。change()与我的代码工作?

谢谢你的回答，但是我不能把你的例子移到我的代码中:(

请确认我遗漏了什么:

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

检查这个演示

: 

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

JS : 

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

check this

小提琴

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

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

如果你需要对其他事件(而不是点击提交)这样做，你可以在输入元素

上应用onchange或focusout。

简单来说，假设您真的想要替换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" />

引用:

  • after() .
  • hide() .
  • on() .
  • replaceWith() .
相关文章：