1

此处是网页 s1527.mtchs.org/chat.html 的链接

当您提交或按 Enter 键时，我的 textarea 的值将附加到 div。当这种情况再次发生时，div中的旧值被删除并附加新值？我该怎么做才能添加另一个值而不是删除旧值？

jQuery：

var captionLength = 0;
var caption = "";

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();
  $(caption).append('<div id = content></div>');
  type();
  }
}

function type() 
{
    $('p.caption').html(caption.substr(0, captionLength++));
    if(captionLength < caption.length+1)
    {
        setTimeout("type()", 50);
    }
    else {
        captionLength = 0;
        caption = "";
}   
}
function testErasingEffect()
{
 caption = $("p.caption").html();
  captionLength = caption.length;
 if (captionLength>0)
  {
erase();
 }
 else
  {
$('p.caption').html("You didn't write anything to erase, but ok!");
   setTimeout("testErasingEffect()", 1000);
 }
   }

           function erase()
          {
$('p.caption').html(caption.substr(0, captionLength--));
if(captionLength >= 0)
{
    setTimeout("erase()", 50);
}
else {
    captionLength = 0;
    caption = "";
}   
}

function cursorAnimation() 
{
  $("p.cursor").animate(
 {
   opacity: 0
}, 300, "swing").animate(
 {
 opacity: 1
 }, 300, "swing");
}
$(document).keypress(function(e) {
   if(e.which == 13) {
       testTypingEffect();
  }
});

HTML：

<div id="chatwrapper">
  <div id="tab">chatname</div>
  <div id="content">
    <p id="time"> 2:14:26pm</p>
    <div id="effectTesting">
      <p id="user">\\diablo\\student\2015:</p>
      <p class="caption"></p>
      <p class="cursor">|</p>
    </div>
    <p class="testing"></p>
    <br>
  </div>
  <div id="textarea">
    <textarea id="userInput" onclick="if(this.value=='Message'){this.value=''}" onblur="if(this.value==''){this.value='Message'}">Message</textarea>
    <input type="submit" id="submit" name="submit" value="Submit" onclick="testTypingEffect()"/>
  </div>
</div>
4

2 回答 2

1

您在第 21 行使用 .html() 而不是 .append() 。更改它还不够，因为您处理实际标题长度以及如何输入字符串不正确，所以我重新编写了您的关键功能。见我的jsfiddle。我也这样做了，因此每次按下提交时它都会在新行上添加新内容。此外，光标将“跟随”内容！

见：http: //jsfiddle.net/GJBGt/9/

HTML：您的原始 HTML

CSS：

span{ float:left; clear:both; margin: 5px 0px; overflow: auto;}
#textarea{ float: left; clear:both}
.cursor{ display:inline }

JS：

var caption = "";
//you REALLY DON'T NEED variable captionLength that you had here before

$(document).ready(function()
{
  setInterval ( "cursorAnimation()", 600 );
});

function testTypingEffect()
{ 
if(userInput.value !== "Message")
{
  caption = $("textarea#userInput").val();

  typefirst();
  }
}

function typefirst() 
{
    $('p.caption').append("<span></span>");
    type();
}

function type()
{
    $("span").eq(-1).append(caption.substr(0, 1));
    $(".cursor").appendTo($("span").eq(-1));
    if(caption.length > 0)
    {
        caption = caption.substring(1);
        setTimeout("type()", 50);
    }
    else {
        caption = "";
}
于 2013-01-09T03:45:28.883 回答
0

我不确定您最终希望它看起来如何，但是您使用 append() 错误。

试试这个：

$("#content").append("<p class='caption'>"+caption+"</p>");

而不是你的：

$(caption).append('<div id = content></div>');

这会将元素添加<p class="caption">(textarea caption)</p>到 .

您可能还想稍微更改一下 type() 动画，如下所示：

$('p.caption:last').html(caption.substr(0, captionLength++));

而不是你的：

$('p.caption').html(caption.substr(0, captionLength++));

这仍然不完美，因为光标不在底部，但您可以通过在光标正上方附加新元素来实现。

于 2013-01-09T03:26:21.370 回答