Question

这是我在单击锚标记

上显示文本框的jquery

$("a").click(function () {

var textbox = $('<input id="txt1" type="text" />')

var oldText = $(this).text();

 $(this).replaceWith(textbox);

           textbox.val(oldText);

     $(this).html($('<input id="txt1" type="text" />').val())

     });

我的锚标记

 <a>hello</a>

当文本框显示文本时使用此项我想更改文本框中的文本并显示新的anchortag文本

Answer 1

我不确切知道你想要获得什么，但以下代码使动态锚文本编辑。我认为没有必要替换<a>元素，我们可以隐藏它：

$("a").click(function() {
    $("<input />").val($(this).hide().text()).on("blur", function() {
        $(this).prev("a").text(this.value).show();
        $(this).remove();
    }).insertAfter(this).trigger("focus");
});

DEMO： http://jsfiddle.net/8dpyG/

Answer 2

试试这个：

jQuery(document).ready(function(){

$('html').click(function(e){
        if(e.target.id == 'txt1' || e.target.id == 'link1') {
                var textbox = $('<input id="txt1" type="text" />')
                var oldText = $(jQuery("#link1")).text();
                $(jQuery("#link1")).replaceWith(textbox);
                textbox.val(oldText);
                $(jQuery("#link1")).html($('<input id="txt1" type="text" />').val())
       } else {
          var newText =  jQuery('#txt1').val()
          var link = jQuery("<a id='link1'></a>");
          jQuery('#txt1').replaceWith(link);
          jQuery('#link1').text(newText);
      }
    });
});
</script>
<html>
<body>
<a id="link1">hello</a></body>
</html>

以下是DEMO

Jquery用于使用在文本框中输入的值更新标签值

2 个答案: