javascript 使用 jquery 将输入字段转换为文本？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12337744/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert input field to text with jquery?
提问by undefined
I need to convert <input type="text" value="1" class="simpleCart_input">to plain text.
我需要转换<input type="text" value="1" class="simpleCart_input">为纯文本。
Like I need it to be something like
就像我需要它一样
<span class="simpleCart_input">1</span>
But how?
但是如何？
回答by undefined
You can use replaceWith.
您可以使用replaceWith.
$('.simpleCart_input').replaceWith(function(){
return '<span class='+this.className+'>'+this.value+'</span>'
})
or:
或者：
$('.simpleCart_input').replaceWith(function(){
return $('<span/>', {
'class': this.className,
text: this.value
})
})
回答by ffffff01
If I understand you correctly this should do it:
如果我理解正确的话，应该这样做：
var a = $('.simpleCart_input').html();
alert(a);
Based on your comment you want this:
根据你的评论，你想要这个：
var a = $('.simpleCart_input').val();
$('.simpleCart').text(a);
(For the code to do it's purpose you need a span with the class simpleCart.)
（为了代码的目的，你需要一个带有 simpleCart 类的跨度。）
Final suggestion:
最后建议：
Just to add the code for converting. This will remove the input field and insert a span with the desired value.
只是为了添加转换代码。这将删除输入字段并插入具有所需值的跨度。
$('.simpleCart_input').replaceWith(
return '<span class='+this.className+'>'+this.value+'</span>'
);
回答by Tats_innit
Try using this: Working demohttp://jsfiddle.net/gvRjn/
尝试使用这个：工作演示http://jsfiddle.net/gvRjn/
http://www.appelsiini.net/projects/jeditable/default.html
http://www.appelsiini.net/projects/jeditable/default.html
Hope it fits your cause :)
希望它适合你的事业 :)
P.S. - this is using http://www.appelsiini.net/projects/jeditableplugin.
PS - 这是使用http://www.appelsiini.net/projects/jeditable插件。
Code
代码
$('.editable-element').editable({
width: 250,
indicator: 'Saving...'
});
?
回答by thecodeparadox
HTML
HTML
<span>
<input type="text" class="simpleCart_input">
</span>?
jQuery
jQuery
$('.simpleCart_input').blur(function() {
var val = $.trim(this.value);
$(this).parent().attr('class', $(this).attr('class')).html(val);
});?
Another
其他
$('.simpleCart_input').blur(function() {
var val = $.trim(this.value);
if( val )
{
$(this).wrap($('<span/>', {
'class': $(this).attr('class'),
html: val
})).remove();
}
});?
回答by xdazz
You could do this:
你可以这样做：
$("input.simpleCart_input").replaceWith(function () {
return '<span class="'+this.className+'">'+this.value+'</span>';
});?
回答by Quentin
var input = $('.simpleCart_input');
input.replaceWith(
$('<span>').text( // Uses text() to avoid breakage if the value contains HTML special characters.
input.val()
)
);
回答by Catalin MUNTEANU
It is actually very simple:
其实很简单：
First you need to identify the input so we will add it an id:
首先，您需要识别输入，以便我们为其添加一个 id：
<input id="my-input" type="text" value="Lorem ipsum" />
Then we can replace the input with text doing something like:
然后我们可以用文本替换输入，执行如下操作：
var input = $('#my-input'), // cache input
value = input.attr('value'), // read input value
span = $('<span></span>); // create a span element
span.text(value); // Place the value inside the span
input.after(span); // Place the span after the input
input.remove(); // Remove the input since this was our mission
This should do the job :)
这应该可以完成工作:)
回答by Shay B.
Do you mean get the value of the input field? If so:
你的意思是获取输入字段的值？如果是这样：
var val = $('.simpleCart_input').val();
alert(val);
var val = $('.simpleCart_input').val();
警报（val）；
