1

Web ページへのリンクはこちら s1527.mtchs.org/chat.html

送信または Enter キーを押すと、テキストエリアの値が 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 行目で .append() の代わりに .html() を使用しました。実際のキャプションの長さの処理と文字列の入力方法が適切でなかったため、これを変更するだけでは不十分でした。そのため、キー関数をやり直しました。私の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 に答える