在更新段落中的文本后，單擊將段落轉換為文本區域

Question

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); function editable_text_clicked() { var div_text = $(this).html(); var text_div = $("<textarea />"); text_div.val(div_text); $(this).replaceWith(text_div); text_div.focus(); text_div.blur(text_divBlurred); } function blurred(argument) { var html = $(this).val(); var viewableText = $(".editable_text p"); viewableText.html(html); $(this).replaceWith(viewableText); // setup the click event for this new div viewableText.click(editable_text_clicked); } $(document).ready(function() { $(".btn").click( function(){ $("editable_text").(editable_text_clicked); }) }); 

 p, textarea{ margin: 20px; padding: 15px; border: 1px solid #ccc; width: 300px; } .btns{ width:300px; margin:20px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Google JS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="editable_text"> <p> Lorem Ipsum Content Comes here... </p> <div class="btns"> <a href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a> </div> </div> 

我不懂JS，但仍然想學習它，今天的任務是創建“待辦事項列表” ，所以這正是我想要的。 當我單擊鉛筆圖標時， .editable_text的p應該進行編輯，當我單擊確定時，在編輯之后，應該將文本附加到.editable_text的p

這是小提琴鏈接， https://jsfiddle.net/zeasts/nfL7qcak/8/

Answer 1

如下所述更新代碼。 當用戶單擊編輯按鈕時-文本區域將顯示內容，並且當用戶單擊保存p標簽將顯示內容。它將起作用，您可以在此處看到-https : //jsfiddle.net/mf8wp3wf/ ：

<div class="editable_text">
<div id="dynamic-div">
  <p id="content-data">
    Lorem Ipsum Content Comes here...
  </p>
</div>

<div class="btns">
    <a href="#edit" class="btn edit-text btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a>
    <a href="#update" class="btn update-text btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a>
  </div>
</div>


$(document).ready(function() {
  $("body").tooltip({ selector: '[data-toggle=tooltip]' });

  $(".edit-text").click( function(){ 
     var content = $("#content-data").html();
     $("#dynamic-div").html("<textarea id='content-area'>"+content+"</textarea>");
  });

  $(".update-text").click( function(){ 
    var text_date = $("#content-area").val();
    $("#dynamic-div").html("<p id='content-data'>"+text_date+"</p>");
  });


});

Answer 2

沒有功能的快速解決方案。 添加模糊和禁用按鈕onclick事件。

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); $(document).ready(function() { $("#edit").click( function(){ if($('.editable_text').css('display')=='block'){ var text=$('.editable_text').text(); $('.editable_text').css('display','none'); $('#textarea_text').css('display','block').val(text).focus(); } }) $("#update").click( function(){ if($('#textarea_text').css('display')=='block'){ var val=$('#textarea_text').val(); $('.editable_text').css('display','block').text(val); $('#textarea_text').css('display','none'); } }) }); 

 p, textarea{ margin: 20px; padding: 15px; border: 1px solid #ccc; width: 300px; } .btns{ width:300px; margin:20px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Google JS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div> <p class="editable_text">Lorem Ipsum Content Comes here... </p> <textarea id="textarea_text" style="display:none"></textarea> </div> <div class="btns"> <a id="edit" href="#edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a> <a id="update" href="#update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a> </div> 

Answer 3

您的代碼中有一些錯誤，請檢查控制台。

至於編輯，這是您可以執行的操作：

$("[href='#edit']").click(function(){
    $(".editable_text").attr("contenteditable", "true").focus();
});

$("[href='#update']").click(function(){
    $(".editable_text").attr("contenteditable", "false");
});

這是您更新的JSFiddle

在我的演示中，我通過它們的href屬性標識了元素。 您始終可以向它們添加新的類或使用唯一的ID。

另請注意，當您要按類引用元素時，請不要忘記前面的點 $(".editable_text")

Answer 4

這可能非常簡單，請查看以下內容：

 $(document).ready(function() { $("body").tooltip({ selector: '[data-toggle=tooltip]' }); }); $('#update').on('click', function(){ $('#result').append('<li>' + $('#myText').val() + '</li>'); $('#myText').val("").attr("disabled", "disabled"); }); $('#edit').on('mouseup', function(){ console.log( $('#myText') ); $('#myText').attr("disabled", false).focus().select(); }); 

 input{ margin: 20px; padding: 15px; border: 1px solid #ccc; width: 300px; } .btns{ width:300px; margin:20px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <!-- Google JS --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> <!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <div class="editable_text"> <input type='text' disabled id="myText" placeholder="Lorem Ipsum Content Comes here..."/> <div class="btns"> <a href="#edit" id="edit" class="btn btn-warning pull-left" data-toggle="tooltip" data-placement="bottom" title="Click to Edit"><i class="glyphicon glyphicon-pencil"></i></a> <a href="#update" id="update" class="btn btn-success pull-right" data-toggle="tooltip" data-placement="top" title="Click to Update"><i class="glyphicon glyphicon-ok"></i></a> </div> <br><br><br><br> TODO LIST: <div id="result"></div> </div>