如何将文本区和编辑区分开

how can i separate text area and edit separately

本文关键字：编辑 区分开 文本区      更新时间：2023-09-26

我想分开文本区域问题是，当我在其中一个区域上写东西时，它们都有相同的文本，我想分别提交每一个。我一直在努力使这项工作遇到很多麻烦，请帮助我，如果我需要更改代码，我也想单独编辑文本，只要它能正常工作，我将非常感激

var z = 1; //value to make div overlappable
$('#addText').click(function (e) {
    /** Make div draggable **/
    $('<div />', {
        class: 'ui-widget-content',
        appendTo: '.container',
        draggable: {
            containment: 'parent',
            start: function( event, ui ) {
                $(this).css('z-index', ++z);
            }
        }
    });
});
$(document).on("dblclick", '.text', function()
{
    $(this).hide();    $(this).closest('.item').find('.edit_text').val($(this).text()).show();
});
$(document).on("click", ".edit_text", function()
{
    return false;
});
$(document).on("click", function()
{
    var editingText = $('.edit_text:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item').find('.text').text($(editingText).val()).show();
    }
});
ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};
var vm=function(){
    var self=this;
    self.items=ko.observableArray();
    self.textContent = ko.observable('');
    self.init=function(){
        self.items([]);
    }
    self.remove=function(item){
        console.log(item);
        self.items.remove(item);
    }
    self.addNew = function() {
      self.items.push( self.textContent() );
      self.textContent('');
    }
    self.init();
}
ko.applyBindings(new vm());
$('.thumbs img').click(function() {
    var thmb = this;
    var src  = this.src;
    $(thmb).parent('.thumbs').prev('.bottlesWrapper').find('img').fadeOut(400,function(){
        thmb.src = this.src;
        $(this).fadeIn(400)[0].src = src;
    });
});


$("#fs").change(function() {
    //alert($(this).val());
    $('.item3').css("font-family", $(this).val());
});
$("#size").change(function() {
    $('.item2').css("font-size", $(this).val() + "px");
});
$('.foo').click(function(){
	$('.item1').css("color", $(this).attr('data-color'));
});
  <select id="fs"> 
        <option value="Agency FB">Agency FB</option>
        <option value="Algerian">Algerian</option>
        <option value="AR Berkley">AR Berkley</option>
        <option value="AR Blanca">AR Blanca</option>
        <option value="AR Bonnie">AR Bonnie</option>
        <option value="AR Carter">AR Carter</option>
        <option value="AR Cena">AR Cena</option>
        <option value="AR Christy">AR Christy</option>
        <option value="AR Darling">AR Darling</option>
        <option value="AR Decode">AR Decode</option>
        <option value="AR Delaney">AR Delaney</option>
        <option value="AR Destine">AR Destine</option>
        <option value="AR Essence">AR Essence</option>
        <option value="AR HERMANN">AR Hermann</option>
        <option value="AR JULIAN">AR Julian</option>
        <option value="Arial">Arial</option>
        <option value="Arial Black">Arial Black</option>
        <option value="Arial Narrow">Arial Narrow</option>
        <option value="Arial Rounded MT Bold">Arial Rounded MT Bold</option>
        <option value="Baskerville Old Face">Baskerville Old Face</option>
        <option value="Bell MT">Bell MT</option>
        <option value="Berlin Sans FB">Berlin Sans FB</option>
        <option value="Berlin Sans FB Demi">Berlin Sans FB Demi</option>
        <option value="Bernard MT Condensed">Bernard MT Condensed</option>
        <option value="Blackadder ITC">Blackadder ITC</option>
        <option value="Bodoni MT">Bodoni MT</option>
        <option value="Bodoni MT Black">Bodoni MT Black</option>
        <option value="Bodoni MT Condensed">Bodoni MT Condensed</option>
        <option value="Bodoni MT Poster Compressed">Bodoni MT Poster Compressed</option>
        <option value="Book Antiqua">Book Antiqua</option>
        <option value="Bookman Old Style">Bookman Old Style</option>
        <option value="Bradley Hand ITC">Bradley Hand ITC</option>   
        <option value="Britannic Bold">Britannic Bold</option>
        <option value="Broadway">Broadway</option>
        <option value="Brush Script MT">Brush Script MT</option>
        <option value="Bodoni MT">Bodoni MT</option>
        <option value="Californian FB">Californian FB</option>
        <option value="Castellar">Castellar</option>
        <option value="Century Gothic">Century Gothic</option>
        <option value="Century Schoolbook">Century Schoolbook</option> 
        <option value="Chiller">Chiller</option>
        <option value="Colonna MT">Colonna MT</option> 
        <option value="Comic Sans MS">Comic Sans MS</option>
        <option value="Constantia">Constantia</option>
        <option value="Cooper Black">Cooper Black</option>
        <option value="Copperplate Gothic Bold">Copperplate Gothic Bold</option>
        <option value="Copperplate Gothic Light">Copperplate Gothic Light</option>
        <option value="Curlz MT">Curlz MT</option>
        <option value="Edwardian Script ITC">Edwardian Script ITC</option> 
       <option value="Elephant">Elephant</option>
       <option value="Engravers MT">Engravers MT</option>
       <option value="Eras Bold ITC">Eras Bold ITC</option>
       <option value="Eras Demi ITC">Eras Demi ITC</option>
       <option value="Eras Light ITC">Eras Light ITC</option>
       <option value="Eras Medium ITC">Eras Medium ITC</option>
       <option value="Felix Titling">Felix Titling</option>
       <option value="Footling MT Light">Footling MT Light</option>
       <option value="Forte">Forte</option>
    </select>
<select id="size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
        <option value="14">14</option>
        <option value="16">16</option>
        <option value="18">18</option>
        <option value="20">20</option>
        <option value="22">22</option>
        <option value="24">24</option>
        <option value="26">26</option>
        <option value="28">28</option>
        <option value="30">30</option>
        <option value="32">32</option>
        <option value="34">34</option>
        <option value="36">36</option>
        <option value="38">38</option>
        <option value="40">40</option>
        <option value="42">42</option>
        <option value="44">44</option>
        <option value="46">46</option>
        <option value="48">48</option>
        <option value="50">50</option>
        
    </select><div class="item1">
<textarea  data-bind="value: textContent" Placeholder="Type text to append"></textarea></div>
<div class="item2">
<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea></div>
<div class="item3">
<textarea data-bind="value: textContent" Placeholder="Type text to append"></textarea></div>
<button data-bind="click: addNew">Generate New Div</button>
<div class="container">
<div data-bind="foreach:items" class="fix_backround">
    <div href="#" class="item1" data-bind="draggable:true,droppable:true">
        <span data-bind="click:$parent.remove">[x]</span><br/><br/>
        <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
    </div>
    <div href="#" class="item2" data-bind="draggable:true,droppable:true">
        <span data-bind="click:$parent.remove">[x]</span><br/><br/>
        <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
    </div>
    <div href="#" class="item3" data-bind="draggable:true,droppable:true">
        <span data-bind="click:$parent.remove">[x]</span><br/><br/>
        <center><span class="text" data-bind="text:$data"></span><input class="edit_text"/></center>
    </div>
</div>
</div><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script  
 src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script><script src="//cdnjs.cloudflare.com/ajax/libs/knockout/2.3.0/knockout-min.js"></script><link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css" />
  <script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
  <link rel="stylesheet"
 href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">

如果我理解正确的话，你的问题是，每当你在第一个文本区域键入内容并模糊时，第二个和第三个文本区域也会更新为与第一个相同的内容。

之所以会发生这种情况，是因为在textarea标记上注册了数据绑定。数据绑定="value:textContent"

一旦您从文本区域标记中删除了此属性，则可以分别编辑3个文本区域。

希望这能帮到你。

如果我理解正确，这个怎么样？

1.

<div class="container">
  <div data-bind="foreach:items" class="fix_backround">
    <div href="#" class="item1" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">[x]</span>
      <br/>
      <br/>
      <center>
        <span class="text" data-bind="text:$data"></span><input class="edit_text"/>
      </center>
    </div>
  </div>
</div>

您的淘汰HTML在items数组中为每个项目创建三个div。我不认为这是你想要的。上面的代码只为items数组中的每个项创建一个div。添加的项目越多，获得的div就越多。

2.

JS:

var vm=function(){
  var self=this;
  self.items=ko.observableArray();
  self.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init=function(){
    self.items([]);
  }
// ...

HTML:

<div class="item1">
  <textarea  data-bind="value: textContent1" Placeholder="Type text to append"></textarea>
</div>
<div class="item2">
  <textarea data-bind="value: textContent2" Placeholder="Type text to append"></textarea>
</div>
<div class="item3">
  <textarea data-bind="value: textContent3" Placeholder="Type text to append"></textarea>
</div>

如果您希望文本输入框独立操作，则需要三个独立的数据绑定。

3.

self.addNew = function() {
  var content = [ 
    self.textContent1(), 
    self.textContent2(), 
    self.textContent3()
  ].filter(function(item) {
    return item !== ''
  });
  content.forEach(function(item) { self.items.push(item); })
  self.textContent1('');
  self.textContent2('');
  self.textContent3('');
}

修改addNew函数以从所有文本框中获取数据，过滤掉没有内容的文本框，并将有内容的文本添加到items数组中。

相关文章：