Demo Fiddle

Question

我有代码：

HTML：

 <input type="submit" value="Show/Hide Box" id="sub" />
                    <input type="text" id="text" value="Keep Me" />

JQuery的：

 $(document).ready(function(){
    $("#sub").click(function(){
       $("#text").toggle();
  });
});

我想展示＆amp;每次单击提交按钮时都隐藏输入框，但始终显示输入值。我认为replaceWith()可能有效，但我不确定如何将现有的内容与之结合起来。无论如何，如果有更好的解决方案，请把它放在那里。

Answer 1

我猜你的意思是在提交时禁用文字字段

$('input[type=submit]').on('click',function (){
   $('input[type=text]').attr('disabled','disabled');
});

现场演示：

http://jsfiddle.net/dreamweiver/xy5uh/6/

快乐编码：）

Answer 2

您可以将文本框值放在范围或任何其他元素中，只需切换显示

即可

 $(document).ready(function () {
     $("#txt").hide()
     $("#sub").click(function () {
         $("#text").toggle();
         $("#txt").html($("#text").val());
         $('#txt').toggle();
     });
 });

Demo Fiddle

Answer 3

最好的解决方案之一是让一个div显示文本和值输入。

<div class="display-text"></div>
<div class="input-text"><input type="text" name="message" class="message" /></div>
<input type="submit" name="postme" id="sub" />

然后做风格：

<style>
.display-text { display:none; }
</style>

最后一步jQuery：

$(document).ready(function(){
    $("#sub").click(function(){ /// onblur of 
        $(".display-text").html($(".message").val()); /// add text to div
        $(".input-text").toggle(); /// hide your input
        $(".display-text").toggle(); /// show text
    });
});

JQuery隐藏输入框但不隐藏输入值

3 个答案:

Demo Fiddle