问题：我有一个页面，其中包含许多<input>字段（只是说所有字段都是文本字段）我想要一个按钮，当单击它时，所有输入字段将仅变为纯文本。例如 <input type="text" value="123" />变成 123如果我单击另一个按钮，文本将变回例如，123 变为<input type="text" value="123" />
有没有一种自动方法可以扫描所有<input>并使用javascript和jquery一次更改它们。
谢谢！
编辑看来你们的想法错了。再次阅读我写的内容：例如 <input type="text" value="123" />变成 123
我已经有 value="123"，为什么我要再次设置该值???
我想要的是例如
<body><input type="text" value="123" /><input type="text" value="456" /></body>变得<body>123456</body>，后来又<body>123456</body>回<body><input type="text" value="123" /><input type="text" value="456" /></body>
用这个去一个方向，
$('input').replaceWith(function(){
return $('<div />').text(this.value).addClass('plain-text');
});
而这个去另一个。
$('.plain-text').replaceWith(function(){
return $('<input />').val($(this).text());
});
http://jsfiddle.net/Evmkf/2/查看此链接
.HTML：
<div id='divInput'>
<input type="text" value='123' />
<br/>
<input type="text" value='456' />
<br/>
<input type="text" value='789' />
</div>
<div id='plainText' style='display:none'></div>
<div>
<input type="button" id='btnPlain' value='Make It Plain' />
<input type="button" id='btnInput' value='Make It Text' />
</div>
Javascript：
$("#btnPlain").bind('click',function(){
$("#plainText").html('');
$("#divInput input[type=text]").each(function(index){
$("#plainText").append('<span>'+$(this).val()+'</span>');
$("#divInput").hide();
$("#plainText").show();
});
});
$("#btnInput").bind('click',function(){
$("#divInput").html('');
$("#plainText span").each(function(index){
$("#divInput").append('<input type="text" value="'+$(this).text()+'"/><br/>');
$("#plainText").hide();
$("#divInput").show();
});
});
试试这个小提琴
$(function() {
var arr = [];
$('#btn').on('click', function() {
var $text = $('#inp input[type="text"]');
if( $text.length > 0){
$text.each(function(i) {
arr[i] = this.value;
});
$('#inp').html(arr.join());
}
else{
if(arr.length <= 0){
}
else{ // Add Inputs here
var html = '';
$.each(arr, function(i){
html += '<input type="text" value="' + arr[i]+ '"/>'
});
$('#inp').html(html);
}
}
});
});
你需要为每个输入创建一个隐藏元素，然后使用 jquery 隐藏输入，显示隐藏元素并为其提供输入值。
<input type="text" value="123" id="input_1" />
<div id="div_1" style="display:none;"></div>
$("#div_1").html($("input_1").val());
$("#input_1").hide();
$("#div_1").show();