Question

在我的聊天系统中，我从列表中添加了笑脸。

问题

我想让那些表情符号像this website一样向下滚动

enter image description here

只是我希望它在输入文件中，以便从输入文件中，我的访问者可以选择一个微笑，当他们点击代码转到输入文件。

到目前为止，这是我在脚本上添加表情符号

的脚本

 <script type="text/javascript"  src="js/jquery/jquery-2.1.3.min.js"></script>

  </script><script language="Javascript">



$(document).on('click', '#emoticons a', function() {    


var smiley = $(this).attr('title');

    var caretPos = caretPos();

    var strBegin = $('#description').val().substring(0, caretPos);
    var strEnd   = $('#description').val().substring(caretPos);

    $('#description').val( strBegin + " " + smiley + " " + strEnd);




function caretPos()
{
    var el = document.getElementById("description");
    var pos = 0;
    // IE Support
    if (document.selection) 
    {
        el.focus ();
        var Sel = document.selection.createRange();
        var SelLength = document.selection.createRange().text.length;
        Sel.moveStart ('character', -el.value.length);
        pos = Sel.text.length - SelLength;
    }
    // Firefox support
    else if (el.selectionStart || el.selectionStart == '0')
        pos = el.selectionStart;

    return pos;

}


});


</script>


<input type="text" id="description" name="description">

<div id="emoticons">
    <a href="#" title=":)"><img alt=":)" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-happy.png" /></a>
    <a href="#" title=":("><img alt=":(" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-unhappy.png" /></a>
    <a href="#" title=":o"><img alt=":o" border="0" src="http://markitup.jaysalvat.com/examples/markitup/sets/bbcode/images/emoticon-surprised.png" /></a>
</div>

我怎样才能实现这一目标？感谢

Answer 1

您可以尝试从您提供的网站示例继承。您需要添加jquery和bootstrap JS作为依赖项。请检查此Fiddle

JS代码：

function textWithSmilies(text) { // Function that change the textarea content in a string including smilies icons
    // Create 2 array: 1 containing the smiley BBCode, the second containing a part of their file name
    var findSmiliesShortcuts = [/:smile:/g, /:sad:/g, /:arrow:/g, /:cool:/g, /:cry:/g, /:grin:/g, /:confused:/g, /:bigeyes:/g, /:evil:/g, /:exclaim:/g, /:geek:/g, /:idea:/g, /:lol:/g, /:mad:/g, /:green:/g, /:neutral:/g, /:question:/g, /:happy:/g, /:redface:/g, /:rolleyes:/g, /:surprised:/g, /:devil:/g, /:wink:/g];
    var replaceSmiliesImg = ['smile', 'sad', 'arrow', 'cool', 'cry', 'grin', 'confused', 'bigeyes', 'evil', 'exclaim', 'geek', 'idea', 'lol', 'mad', 'green', 'neutral', 'question', 'happy', 'redface', 'rolleyes', 'surprised', 'devil', 'wink'];

    for (i = 0; i < findSmiliesShortcuts.length; i++) {
        text = text.replace(findSmiliesShortcuts[i], '<img src="http://www.tipocode.com/images/smilies/icon_' + replaceSmiliesImg[i] + '.gif" alt="" />'); // Replace all smilies BBCode by their image
    }
    text = text.replace(/\n/g, '<br />'); // Replace new lines by <br />
    return text;
}

$(function() {
    // This function allow to insert text or smiley in the textarea where the cursor is
    jQuery.fn.extend({
    insertAtCaret: function(myValue) {
      return this.each(function(i) {
        if (document.selection) {
          //For browsers like Internet Explorer
          this.focus();
          sel = document.selection.createRange();
          sel.text = myValue;
          this.focus();
        }
        else if (this.selectionStart || this.selectionStart == '0') {
          //For browsers like Firefox and Webkit based
          var startPos = this.selectionStart;
          var endPos = this.selectionEnd;
          var scrollTop = this.scrollTop;
          this.value = this.value.substring(0, startPos)+myValue+this.value.substring(endPos,this.value.length);
          this.focus();
          this.selectionStart = startPos + myValue.length;
          this.selectionEnd = startPos + myValue.length;
          this.scrollTop = scrollTop;
        } else {
          this.value += myValue;
          this.focus();
        }
      })
    }
    });

    $('#myTextarea').val(''); // We first empty the textarea

    $('#myForm #clear').click(function() { // Clear everything when click on the "Clear" button
        $('#myTextarea').val('');
        $('#output').text('');
        $('#submitOutput').text('');
    });

    $('#myForm #submit').click(function() { // When click on "Submit" button
        $('#submitOutput').html('<div class="well well-sm">' + textWithSmilies($('#myTextarea').val()) + '</div>'); // Add the textarea content in the <div="submitOutput"> markup
    });

    $('img#addSmiley').on('click', function() { // When click on a smiley
        smiley = $(this).attr('alt'); // We take it's attribute alt which contains the unique smiley BBCode choosen
        $('#myTextarea').insertAtCaret(smiley); // Call the function "insertAtCaret" and insert the smiley BBCode in the textarea where the cursor is

        var text = textWithSmilies($('#myTextarea').val()); // Call function "textWithSmilies" and change smilies BBCode by their icon
        $('#output').html(text); // Display in div=output markup

        return false;
    });

    $('#myTextarea').keyup(function(){ // When keyup in the textarea (when you pull up the key)
        var text = textWithSmilies($(this).val()); // Call function "textWithSmilies" and change smilies BBCode by their icon
        $('#output').html(text); // Display in div=output markup
    });
});

HTML代码：

<input type="text" id="description" name="description"/>

<div class="btn-group">
                    <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                    <img alt="" src="http://www.tipocode.com/images/smilies/icon_smile.gif"> <span class="caret"></span>
                    </button>
                    <ul role="menu" class="dropdown-menu"><li><a href="#"><table><tbody><tr>
                    <td><img alt=":smile:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_smile.gif">&nbsp;</td><td><img alt=":sad:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_sad.gif">&nbsp;</td><td><img alt=":arrow:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_arrow.gif">&nbsp;</td><td><img alt=":cool:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_cool.gif">&nbsp;</td><td><img alt=":cry:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_cry.gif">&nbsp;</td></tr><tr><td><img alt=":grin:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_grin.gif">&nbsp;</td><td><img alt=":confused:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_confused.gif">&nbsp;</td><td><img alt=":bigeyes:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_bigeyes.gif">&nbsp;</td><td><img alt=":evil:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_evil.gif">&nbsp;</td><td><img alt=":exclaim:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_exclaim.gif">&nbsp;</td></tr><tr><td><img alt=":geek:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_geek.gif">&nbsp;</td><td><img alt=":idea:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_idea.gif">&nbsp;</td><td><img alt=":lol:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_lol.gif">&nbsp;</td><td><img alt=":mad:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_mad.gif">&nbsp;</td><td><img alt=":green:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_green.gif">&nbsp;</td></tr><tr><td><img alt=":neutral:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_neutral.gif">&nbsp;</td><td><img alt=":question:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_question.gif">&nbsp;</td><td><img alt=":happy:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_happy.gif">&nbsp;</td><td><img alt=":redface:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_redface.gif">&nbsp;</td><td><img alt=":rolleyes:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_rolleyes.gif">&nbsp;</td></tr><tr><td><img alt=":surprised:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_surprised.gif">&nbsp;</td><td><img alt=":devil:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_devil.gif">&nbsp;</td><td><img alt=":wink:" id="addSmiley" src="http://www.tipocode.com/images/smilies/icon_wink.gif">&nbsp;</td>                   </tr></tbody></table></a></li></ul>
                    </div>

                        <div id="output"></div>

如何从输入字段制作笑脸可滚动

1 个答案: