如何在用户写文本和按空格后更换表情符号 [英] How to replace emoticons yet after user write text and press space

问题描述

如果用户写文本像:)，:(等在textarea上，我希望它会在用户按下键盘空间后用表情符号替换此文本。（比如facebook替换表情符号）。

If user write text like :) , :( ect. on textarea, I want to it will be replace this text with emoticon just after user press key-board space. (like facebook replace emoticon).

在我的下面的PHP代码中，按提交后替换表情符号。但是我想，它将用克林特端的java脚本替换表情符号。

In my below php code, replace emoticon after press submit. But I want, It will be replase also emoticon with a Clint-side java script.

my php：

function smileys($text){
// Smiley to image
$smileys = array(
    ':)' => '<img src="smilies/smile.gif" border="0" alt="" />',
    ':-)' => '<img src="smilies/smile.gif" border="0" alt="" />',
    ':D' => '<img src="smilies/smile.gif" border="0" alt="" />',
    ':-(' => '<img src="smilies/angry.gif" border="0" alt="" />',
    ':-D' => '<img src="smilies/biggrin.gif" border="0" alt="" />',
    'lol' => '<img src="smilies/biggrin.gif" border="0" alt="" />',
    ':-|' => '<img src="smilies/undecided.gif" border="0" alt="" />',
    ';-)' => '<img src="smilies/wink.gif" border="0" alt="" />',
);

// Now you need find and replace
foreach($smileys as $search => $replace){
     $text = preg_replace("#(?<=\s|^)" . preg_quote($search) . "#",  $replace, $text);
return $text;
    }
}
// My others code

echo ''.smileys($description).'';

我收集了这个按下空格键后开始工作的JavaScript，但我不知道怎么写这个完整的脚本正在进行中以替换。

I collected this JavaScript which start working after press space key, but I cannot have any idea how to write this full script for work in progress to replace.

    $('#comment').keypress(function(e)
{
    if(e.keyCode == 32)
    {
        var comment = $('#comment').val()
        //What will be here, I can't understand !!!
    }
});

my textarea

my textarea

<textarea name="comment" id="comment"></textarea> 

推荐答案

var smileys = {
  ':)': '<img src="smilies/smile.gif" border="0" alt="" />',
  ':-)': '<img src="smilies/smile.gif" border="0" alt="" />',
  ':D': '<img src="smilies/smile.gif" border="0" alt="" />',
  ':-(': '<img src="smilies/angry.gif" border="0" alt="" />',
  ':-D': '<img src="smilies/biggrin.gif" border="0" alt="" />',
  'lol': '<img src="smilies/biggrin.gif" border="0" alt="" />',
  ':-|': '<img src="smilies/undecided.gif" border="0" alt="" />',
  ';-)': '<img src="smilies/wink.gif" border="0" alt="" />',
};


$(document).ready(function() {
  $(".chat > textarea").attr("disabled", false); //enable the box on page load
  $(".chat > textarea").keypress(function(e) {
    $(".chat > div").html(smilyMe($(".chat > textarea").val()));
  });
})

function smilyMe(msg) {
  //smiley replace
  return msg.replace(/(\:\)|\:-\)|\:D|\:-D|\blol\b|\:-\||\:-\(|\;-\))/g, function(all) {
    return smileys[all] || all;
  });
}

div.chat {
  width: 400px;
  height: 200px;
  border: 1px solid grey;
}
div.chat > div {
  height: calc(100% - 50px);
  width: 100%;
  border-bottom: 1px dashed #939393;
  padding: 2px 10px 10px 10px;
}
div.chat > div > div {
  color: #939393;
  font-size: 9px;
}
div.chat > textarea {
  height: 50px;
  width: 100%;
  box-sizing: border-box;
  border: 0px;
  padding: 5px;
}
div {
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="chat">
  <div>
    <div>Preview</div>
  </div>
  <textarea disabled placeholder="Type your message here..."></textarea>

</div>

使用我的 smilyMe 功能。

但是你可以不要将图像附加到文本区域。所以我实现了预览功能。

However you can't attach images to a textarea. So I implemented a preview function.

这篇关于如何在用户写文本和按空格后更换表情符号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！