如何使用 jquery 禁用和启用文本框？

Question

这里我有一个文本框

<input name="" type="text" id="txt" onblur="txt(this)"/>

和 jquery

function txt(th) {
  $(th).hide().after('<span class=\"dfk\">' + $(th).val() + '</span>');  
}

我已经禁用了文本框并显示了文本框的值，但再次单击了文本框的值。 文本框应启用该值。

Answer 1

你可以这样做（如果我明白你需要什么）：

<input name="" type="text" id="txt" />

$('#txt').blur(function(){
    $(this).hide().after('<span class="dfk">' + $(this).val() + '</span>');  
});

    $('.dfk').live('click', function(){
       $(this).prev().show();
       $(this).remove();
    });

在这里摆弄： http://jsfiddle.net/qJ3sY/2/

编辑 - 我更正使用跨度

Answer 2

在这里演示

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("#txt")
    .focus(function() {
      $(this).removeClass("txtOff").addClass("txtOn");
    })
    .blur(function() {
      $(this).removeClass("txtOn").addClass("txtOff");
    });
});
</script>    
<style>
.txtOn { border:1px solid black; background-color:light-grey}
.txtOff { border:1px solid white; background-color:white}
</style>
<input name="txt" type="text" id="txt" class="txtOff" value="" placeholder="Click to edit" />