Как изменить/изменить значение метки с помощью jquery/javascript?

я быть_наст стандартная HTML метка со значением:Как изменить/изменить значение метки с помощью jquery/javascript?

<label id="telefon" value="101"></label>

я хотел бы изменить это значение, нажав на этикетке и введите в появившемся текстовом поле нового значения (например, value="202").

как я могу сделать такую сложную вещь?

я пробовал с функцией JQuery, но это действительно не привычка работать:

$(function() { 

    $('a.edit').on("click", function(e) { 
    e.preventDefault(); 
    var dad = $(this).parent().parent(); 
    var lbl = dad.find('label'); 
    lbl.hide(); 
    dad.find('input[type="text"]').val(lbl.text()).show().focus(); 
    }); 

    $('input[type=text]').focusout(function() { 
    var dad = $(this).parent(); 
    $(this).hide(); 
    dad.find('label').text(this.value).show(); 
    }); 

});

источник

2013-10-07 r.r

Не могли бы вы предоставить полную разметку HTML, такую как «редактирование», «текст ввода» и т. Д.? –

Эй, было бы просто, не могли бы вы опубликовать свой код в jsfiddle, –

Вы должны использовать innerHTML не значение, например ' 101', а затем вы можете изменить ярлык innerHTML на '.html' или '.text' – ncm

http://jsfiddle.net/jasuC/, С, которого не обеспечивают разметку, посмотрите в этот рабочий пример

$(document).on("click", "label.mytxt", function() { 
    var txt = $(".mytxt").text(); 
    $(".mytxt").replaceWith("<input class='mytxt'/>"); 
    $(".mytxt").val(txt); 
}); 

$(document).on("blur", "input.mytxt", function() { 
    var txt = $(this).val(); 
    $(this).replaceWith("<label class='mytxt'></label>"); 
    $(".mytxt").text(txt); 
});

источник

2013-10-07 10:00:58 rps

Эта работа еще лучше, если мы установим 'id' в тип ввода, например " –

Вы не нужно jquery.

Чтобы сделать почти все элементы тега редактируемые, установите contentEditable на true.

Итак, вы можете изменить, используя стандартные функции HTML.

источник

2013-10-07 10:01:58

// Вы можете добавить прослушиватель событий в ваш тег формы и код обработчик, который будет общим для всех меток (Fiddle HERE)

// HTML

<form id="myform"> 
    <label style="background-color:#eee" title="101">Value is 101<label> 
</form>

// JS

$(function(){ 
    $('#myform').on('click',function(e){ 
     var $label = $(e.target), $form = $(this), $editorInput = $('#editorInput'), offset = $label.offset(); 
     if($label.is('label')){ 
      if(!$editorInput.length){ 
       $editorInput = $('<input id="editorInput" type="text" value="" style="" />').insertAfter($label); 
      } 
      $editorInput.css('display','inline-block') 
       .data('editingLabel', $label.get(0)) 
       .focus() 
       .keydown(function(e){ 
        var $l = $($(this).data('editingLabel')), $t = $(this); 
        if(e.which == 13){ 
         $l .attr('title', $t.val().replace(/(^\s+)|(\s+$)/g,'')) 
          .text('value is now ' + $l.attr('title')); 

         // UPDATE YOUR DATABASE HERE 

         $t.off('keydown').css('display','none'); 
         return false; 
        } 
       }); 
     } 
    }); 
});

// немного CSS

#editorInput{display:none;padding:2px;border:1px solid #eee;margin-left:5px}

источник

2013-10-07 10:45:39 Stphane

Как изменить/изменить значение метки с помощью jquery/javascript?

ответ

Смежные вопросы