0

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

是否有一种自动方法来扫描所有<input>s 并使用 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>

4

4 回答 4

2

用这个去一种方式，

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

这个去另一个。

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

​</p>

于 2012-10-04T04:27:31.750 回答
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();
  });
});

​</p>

于 2012-10-04T05:34:36.487 回答
1

试试这个小提琴

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

​</p>

于 2012-10-04T04:53:09.627 回答
-1

您需要为每个输入创建一个隐藏元素，然后使用 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();
于 2012-10-04T04:28:38.623 回答