[英]jQuery change value of input and display it as text
I'm struggling with the following problem. 我正在努力解决以下问题。 I have input text element. 我有输入文本元素。 I want a user to enter something there and then his value appears as a normal text (the input should disappear). 我希望用户在那里输入内容,然后他的值显示为普通文本(输入应该消失)。
I searched for a few solutions but nothing worked for me. 我搜索了一些解决方案,但没有任何对我有用。 What I tried (whatever function I provide, I get no results, what should I provide to get the effect I described above and how to make it happen?): 我尝试了什么(无论我提供什么功能,我都没有得到任何结果,我应该提供什么来获得我上面描述的效果以及如何实现它?):
$('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
How to make functions like .on() or .change() work with my code? 如何使像.on()或.change()这样的函数与我的代码一起使用?
thanks for all the answer, but I can't move your examples to my code :( 感谢所有答案,但我无法将您的示例移动到我的代码:(
Please verify this fiddle what I'm missing: 请验证这个小提琴我错过了什么:
[http://jsfiddle.net/w6242/][1]
Here a fiddle http://jsfiddle.net/keypaul/NsWC5/5/ 这里有一个小提琴http://jsfiddle.net/keypaul/NsWC5/5/
HTML HTML
<div id="wrapper">
<input type="text" id="writer" />
<a href="#" id="submit">send</a>
</div>
JQuery 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();
});
If you need to do that with onther event (instead of a click submit) you can use onchange or focusout applied to your input element 如果你需要使用onther事件(而不是点击提交),你可以使用onchange或focusout应用于你的输入元素
At its simplest, assuming you really want to replace the input
: 最简单的,假设你真的想要替换input
:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var p = $('<p />', {
text : this.value
});
$(this).replaceWith(p);
}
});
Or, to insert an adjacent element and simply hide the input
: 或者,要插入相邻元素并简单地隐藏input
:
$('#demo').on('keyup', function(e){
if (e.which === 13) {
var span = $('<span />', {
text : this.value
});
$(this).hide().after(span);
}
});
The above jQuery works with the following demonstrative HTML: 上面的jQuery使用以下演示HTML:
<input id="demo" type="text" />
References: 参考文献:
after()
. after()
。 hide()
. hide()
。 on()
. on()
。 replaceWith()
. replaceWith()
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.