Question

我有一个创建的插件，并且在一定时间间隔内填充<p>，其内容为<textarea>。该插件将<p>定位在<textarea>下方，并对元素进行样式设置，以便他们的＆＃34;框＆＃34;是相同的。此外，<textarea>的背景和文字定义为transparent，以便可以看到<p>的内容。

理想情况下，元素及其内容将始终相互映射。在大多数情况下，他们这样做。但是，当两个元素都可以滚动时，动态中断;这是由于两个元素scrollHeight的差异（scrollHeight的{{1}}大于<textArea>的<{1}}

以下是代码：

＆＃13;

<p>

＆＃13;

var $shadowParagraphObj = $("#shadowParagraph");
var $contentTextAreaObj = $("#contentTextArea").scroll(scrollShadowParagraph);

function scrollShadowParagraph(event)
{
  var textAreaScrollLeft = $contentTextAreaObj.scrollLeft();
  var textAreaScrollTop = $contentTextAreaObj.scrollTop();

  if($shadowParagraphObj.scrollLeft() != textAreaScrollLeft)
    $shadowParagraphObj.scrollLeft(textAreaScrollLeft)

  if($shadowParagraphObj.scrollTop() != textAreaScrollTop)
    $shadowParagraphObj.scrollTop(textAreaScrollTop)
}

var intervalId = setInterval(function(){$shadowParagraphObj.html($contentTextAreaObj.val())}, 100);

＆＃13;

#containerDiv {
  position: relative;
  left: 50%;
  margin-left: -250px;
  width: 510px;
  height: 200px;
}

#shadowParagraph, #contentTextArea {
  width: inherit;
  height: inherit;
  overflow: scroll !important;
  padding: 4px;
  border : none;
  outline: none;
  margin: 0px;
  white-space: pre-wrap;
  word-wrap: pre-wrap;
  font: 1em Arial, sans-serif;
}

#shadowParagraph {
  position: absolute;
  z-index: 0;
  background: white;
  color: blue;
}

#contentTextArea {
  position: relative;
  z-index: 1;
  background: transparent;
}

＆＃13;

溢出<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id='containerDiv'> <p id='shadowParagraph'></p> <textarea id='contentTextArea'></textarea> </div>应该会产生问题（<textarea>的文字已被赋予颜色，以便轻松查看该问题。）

我是否忘记声明导致<textarea>值之间存在差异的某些属性？如果是这样，他们是什么，我应该如何申报？如果没有，有没有办法确保两个元素的scrollHeight始终相等？

Answer 1

好的，所以使用.replace(/\n\r?g, '<br />')转换更新的值，您的换行符将转换为html换行符。此外，html往往忽略单独的<br />换行符，因此您需要为该值添加额外的<br />以确保呈现最后一个换行符。

将这看起来像是：

var textAreaHTML = $myTextArea.val().replace(/\n\r?g, '<br />')+'<br />';

此外，我建议使用.keyup()更新您的textarea值并在.keypress()事件，.on('keyup keypress', function() {...})事件或两个事件上滚动位置。

要查看此操作，请查看this jsFiddle example

溢出时，相同的元素具有不同的scrollHeights。原因是什么，我该如何解决？

1 个答案: