javascript - 输入文本在 div 中双倍显示-6ren

javascript - 输入文本在 div 中双倍显示

转载作者：行者123 更新时间：2023-11-30 16:03:59

有人可以帮帮我吗？我已经尝试了好几天了，但这一直没有正常工作我的问题是，当我尝试输入一些文本时，它在每个 div 中显示为双一，如果您需要进一步的解释，请询问。尝试输入一些东西，当我编辑它们时，你会看到我在说什么，其中一个改变了颜色，另一个改变了大小和字体，原因是因为类别不同，每个 div 故意有不同的类别这是网站 http://amp.site88.net/

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('.item1').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('.item1').find('.text').text($(editingText).val()).show();
    }
});

ko.bindingHandlers.draggable={
    init: function(element, valueAccessor, allBindingsAccessor, viewModel) {
        $(element).draggable();
    }
};



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('.item2').find('.edit_text1').val($(this).text()).show();
});

$(document).on("click", ".edit_text1", function()
{
    return false;
});


$(document).on("click", function()
{
    var editingText = $('.edit_text1:visible');
    if (editingText.length)
    {
        editingText.hide();
        editingText.closest('.item2').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.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
 }
 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('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
    //alert($(this).val());
    $('.item1').css("font-family", $(this).val());

});

$("#size").change(function() {
    $('.item1').css("font-size", $(this).val() + "px");
});


$('.foo').click(function(){
    $('.item2').css("color", $(this).attr('data-color'));
});

<style>.item{
    width: 200px;
    height: 200px;
    padding: 0.5em;
    background:transparent;
    z-index: 1;
    display:block;
}

.edit_text
{
    display: none;
}
.edit_text1
{
    display: none;
}
.fix_backround
{
    background-color: transparent;
}

.container {
    width: 500px;
    height: 500px;
    border: 2px solid;
    position: relative;
    overflow: auto;
}
</style><style>
.thumbs img{
  margin:3px;
  width:50px;
  float:left;
}</style>
<style>
.bottlesWrapper img{
  margin:3px;
  width:400px;
  float:left;
}</style>
<style>#main { border:1px solid #eee; margin:20px; width:410px; height:220px;}
</style>
<style type="text/css" media="screen">
    .transparent { background:transparent }
</style>

<style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}
.white {
  background: #FFFFFF;
}
.yellow {
  background: #FAFF38;
}
.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}
.dorange {
  background: #FF5500;
}
.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}
.lblue {
  background: #00A2FF;
}.blue {
  background: #1713F6;
}.purple {
  background: #AB09D3;
}.black {
  background: #000000;
}

</style><style>   #mainTarget{
    width:30px; 
    height:20px; 
    position:relative;
    top:100px; 
    left:25%
}

.mainTarget{position:absolute; width:25px; height:25px;}

#target{
    position:absolute;
    height:25px;
    width:25px;
    background:url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
    background-size:100%;
    cursor:pointer; 
    z-index:1; 
    top:1; 
    right:1;    
}
</style>

<form method="post" action="<?php echo $PHP_SELF;?>">


<div id="colour" >
  <div class="foo white" data-color="#FFFFFF"></div>
  <div class="foo black" data-color="#000000"></div>
  <div class="foo yellow" data-color="#FAFF38"></div>
  <div class="foo orange" data-color="#FFA200"></div>
  <div class="foo red" data-color="#FF0000"></div>
  <div class="foo dorange" data-color="#FF5500"></div>
  <div class="foo lgreen" data-color="#80FF00"></div>
  <div class="foo green" data-color="#45C731"></div>
  <div class="foo turk" data-color="#17DDBC"></div>
  <div class="foo lblue" data-color="#00A2ff"></div>
  <div class="foo blue" data-color="#1713F6"></div>
  <div class="foo purple" data-color="#AB09D3"></div>
</div>
    <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>

    </select>

    <select id="size">
        <option value="8">8</option>
        <option value="9">9</option>
        <option value="10">10</option>
        <option value="11">11</option>


    </select>





 </form>
 <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>

<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_text1"/>
      </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">

最佳答案

这是一次给你一个的代码。独立工作的事情还没有解决，但我认为它值得赞成!

var z = 1; //value to make div overlappable
var i = 0;
$('#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);
      }
    }
  });
  i++;
});

$(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.textContent1 = ko.observable('');
  self.textContent2 = ko.observable('');
  self.textContent3 = ko.observable('');
  self.init = function() {
    self.items([]);
  }
  self.remove = function(item) {
    console.log(item);
    self.items.remove(item);
  }
  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('');
  }
}

ko.applyBindings(new vm());

$("#fs").change(function() {
  //alert($(this).val());
  $('.item').css("font-family", $(this).val());

});

$("#size").change(function() {
  $('.item').css("font-size", $(this).val() + "px");
});


$('.foo').click(function() {
  $('.item').css("color", $(this).attr('data-color'));
});

<style> .item,
.item1 {
  width: 200px;
  height: 50px;
  float: left;
  padding: 0.5em;
  background: transparent;
  z-index: 1;
}

textarea {
  float: left;
  display: block;
  margin-top: 20px;
  margin-bottom: 30px;
  margin-right: 80%;
}

.edit_text {
  display: none;
}

.edit_text1 {
  display: none;
}

.fix_backround {
  background-color: transparent;
}

.container {
  width: 500px;
  height: 500px;
  border: 2px solid;
  position: relative;
  overflow: auto;
}

</style><style> .thumbs img {
  margin: 3px;
  width: 50px;
  float: left;
}

</style> <style> .bottlesWrapper img {
  margin: 3px;
  width: 400px;
  float: left;
}

</style> <style>#main {
  border: 1px solid #eee;
  margin: 20px;
  width: 410px;
  height: 220px;
}

</style> <style type="text/css" media="screen"> .transparent {
  background: transparent
}

</style> <style>.foo {
  float: left;
  width: 20px;
  height: 20px;
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.white {
  background: #FFFFFF;
}

.yellow {
  background: #FAFF38;
}

.orange {
  background: #FFA200;
}

.red {
  background: #FF0000;
}

.dorange {
  background: #FF5500;
}

.lgreen {
  background: #80FF00;
}

.green {
  background: #45C731;
}

.turk {
  background: #17DDBC;
}

.lblue {
  background: #00A2FF;
}

.blue {
  background: #1713F6;
}

.purple {
  background: #AB09D3;
}

.black {
  background: #000000;
}

</style><style> #mainTarget {
  width: 30px;
  height: 20px;
  position: relative;
  top: 100px;
  left: 25%
}

.mainTarget {
  position: absolute;
  width: 25px;
  height: 25px;
}

#target {
  position: absolute;
  height: 25px;
  width: 25px;
  background: url(http://files.softicons.com/download/system-icons/human-o2-icons-by-oliver-scholtz/png/128x128/actions/object-rotate-left.png) no-repeat top center #ffffff;
  background-size: 100%;
  cursor: pointer;
  z-index: 1;
  top: 1;
  right: 1;
}

</style><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">

<form method="post" action="<?php echo $PHP_SELF;?>">

  <div id="colour">
    <div class="foo white" data-color="#FFFFFF"></div>
    <div class="foo black" data-color="#000000"></div>
    <div class="foo yellow" data-color="#FAFF38"></div>
    <div class="foo orange" data-color="#FFA200"></div>
    <div class="foo red" data-color="#FF0000"></div>
    <div class="foo dorange" data-color="#FF5500"></div>
    <div class="foo lgreen" data-color="#80FF00"></div>
    <div class="foo green" data-color="#45C731"></div>
    <div class="foo turk" data-color="#17DDBC"></div>
    <div class="foo lblue" data-color="#00A2ff"></div>
    <div class="foo blue" data-color="#1713F6"></div>
    <div class="foo purple" data-color="#AB09D3"></div>
  </div>
  <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>

  </select>

  <select id="size">
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
    <option value="11">11</option>


  </select>

</form>
<div class="item">
  <textarea data-bind="value:textContent1" 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="item" data-bind="draggable:true,droppable:true">
      <span data-bind="click:$parent.remove">X</span>
      <br/>
      <br/>
      <center>
        <span class="text i" data-bind="text:$data"></span>
        <input class="edit_text" />
      </center>
    </div>

  </div>
</div>

关于javascript - 输入文本在 div 中双倍显示，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37305953/

文章推荐： html - libxml2 - 删除子项，但不删除孙子

文章推荐： c# - Windows 10 通知 WPF

文章推荐： c - 不支持获取 ai_socktype

文章推荐： c - 向 C 添加程序参数

postgresql - 组内级联的Postgres交叉表(文本，文本)
表架构 DROP TABLE bla; CREATE TABLE bla (id INTEGER, city INTEGER, year_ INTEGER, month_ INTEGER, val I
javascript - 按一定顺序分割字符串。例如文本/0000/文本/文本
我需要拆分字符串/或从具有以下结构的字符串中获取更容易的子字符串。字符串将来自 window.location.pathname 或 window.location.href，看起来像 text/n
ios - 将对象添加到数组时更新 textView 文本，而不覆盖前一个对象的 textView 文本
每当将对象添加到数组中时，我都会尝试更新 TextView ，并在 TextView 中显示该文本，如下所示: "object 1" "object 2" 问题是，每次将新对象添加到数组时，它都会覆盖
java - Html 2 文本 - 删除 "hidden"文本
我目前正在寻找使用 Java 读取网站可见文本并将其存储为纯文本字符串的方法。换句话说，我想转换成这样: Hello stupid World进入“ Hello World ” 或者类似的东西 Un
php - Pear Mail，如何以UTF-8发送纯文本/文本+文本/html
我正在尝试以文本和 HTML 格式发送电子邮件，但无法正确发送正确的 header 。特别是，我想设置 Content-Type header ，但我找不到如何为 html 和文本部分单独设置它。这
c# - 从资源 wpf 绑定(bind)文本 block 文本
我尝试了上面的代码，但我无法绑定(bind)文本，我怎样才能将资源内部文本 bloc
unity3d - Unity 网络播放器因 UI 文本(新 Canvas 文本)而崩溃
我刚刚完成了 Space Shooter 教程，由于没有 GUIText 对象，所以我创建了 UI.Text 对象并进行了相应的编码。它在统一播放器中有效，但在构建 Web 应用程序后无效。我花了一段
ios - 为什么 UITextField 文本 setter 无法识别 [UIView 文本] 选择器
我有这个代码: - (IBAction)setButtonPressed:(id)sender { NSUserDefaults *sharedDefaults = [[NSUserDefau
java - 在 JLabel 图标上添加 JLabel 文本。使用相同的 JLabel 文本
抱歉标题含糊不清，但我想不出我想在标题中做什么。无论如何，对于图像上的文本，我使用了 JLabel 文本并将其添加到图标中。 JLabel icon = new JLabel(new Imag
javascript - "The stylesheet was not loaded because its MIME type, "文本/html "is not "文本/css"
关闭。这个问题是not reproducible or was caused by typos .它目前不接受答案。这个问题是由于错别字或无法再重现的问题引起的。虽然类似的问题可能是on-topi
html - 是否可以使用 CSS 定位 HTML(文本)？ - 它显示为(文本)作为 ID
我在将 Twitter 嵌入到我从 HTML 5 转换的 wordpress 运行网站时遇到问题。我遇到的问题是推文不是我的自定义字体... 这是我无法使用任何 css 定位的 HTML 代码，我正
java - 将 logger.debug ("message: "+ 文本)转换为 logger.debug(消息 : {}", 文本)
我正在尝试找到解决由于使用以下形式的代码而导致的冗余字符串连接问题的最佳方法: logger.debug("Entering loop, arg is: " + arg) // @1 在大多数情况下，
java分组正则表达式无法匹配字符串+文本
我写了这个测试 @Test public void removeRequestTextFromRouteError() throws Exception { String input = "F
java正则表达式匹配&[文本]
我目前正在创建一个正则表达式来拆分所有匹配以下格式的字符串:&[文本]，并且需要获取文本。字符串可能类似于:something &[text] &[text] everything &[text] 等
CSS变形词/文本
有没有办法将标题文本从一个词变形为另一个词，同时保留两个词中使用的字母？我看过的许多 css 文本动画大多是视觉的，很少有旋转整个单词的。我想要做的是从一个词过渡，例如“BEACH”到“CHANGE
学习python中matplotlib绘图设置坐标轴刻度、文本
总结matplotlib绘图如何设置坐标轴刻度大小和刻度。上代码： ?
容器内的 Flutter 文本
我在容器 (1) 中创建了容器 (2)。你能帮忙如何向容器(1)添加文本吗？下面是我的代码 return Scaffold( body: Padding( padding: c
具有渐变和渐变轮廓的 CSS 文本
我似乎找不到任何人或任何人这样做过。我试图限制我们使用的图像数量，并想创建一个带有渐变作为其“颜色”的文本，并在其周围设置渐变轮廓/描边到目前为止，我还没有看到任何将两者结合在一起的东西。我可以自
从视频游戏截图中提取 Python 文本
我正在为视频游戏暗黑破坏神 2 使用 discord.py 构建一个不和谐机器人。其中一项功能要求机器人从暗黑破坏神 2 屏幕截图中提取项目的名称和属性。我目前正在为此使用 pytesseract，但
在ggplot2中旋转 strip 文本
我很难弄清楚如何旋转 strip.text theme 中的属性来自 ggplot2 .我使用的是 R 版本 3.4.2 和 ggplot2 版本 2.2.1。以下是 MWE 的数据。 > dput

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 输入文本在 div 中双倍显示