Как сделать смайлик прокручиваемым из поля ввода

Question

В моей системе чата я добавляю смайлики из списка, который у меня есть.

ВОПРОСЫ

Я хотел бы сделать эти смайлы прокручивается вниз, как this website делает только

, что я хотел бы, чтобы это было в исходном файле так, что прямо от входа файл, мои посетители могут выбрать улыбку, и по мере того, как они нажимают, код переходит во входной файл.

До сих пор это скрипт у меня есть, что добавляет смайликов по щелчку

<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> 

Как я могу добиться того, пожалуйста? Thanks

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>