Question

问题：我有一个包含许多<input>字段的页面（只是说所有字段都是文本字段）我想要一个按钮，当点击它时，所有输入字段将只是纯文本。例如<input type="text" value="123" />变为123 如果我点击另一个按钮，文本将变回例如123变为<input type="text" value="123" />

是否有自动方式扫描所有<input>并使用javascript和jquery一次更改所有内容。

谢谢！

编辑看起来你们的想法是错误的。阅读我再写的内容：例如<input type="text" value="123" />变为123

我已经有了值=“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>

Answer 1

使用此方法，

$('input').replaceWith(function(){
    return $('<div />').text(this.value).addClass('plain-text');
});

这是另一个。

$('.plain-text').replaceWith(function(){
    return $('<input />').val($(this).text());
});

Answer 2

点击此链接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();
  });
});

Answer 3

尝试this FIDDLE

$(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); 
            }
        }
    });
});

Answer 4

您需要为每个输入创建一个隐藏元素，然后使用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();

如何通过单击按钮将所有<input />更改为其值并稍后将其更改回来？

4 个答案:

HTML：

使用Javascript：