チャットのように、入力してEnter押すと、その内容がどんどん反映

Ads

Result

jQuery

//キープレスイベント
$('#text').live('keypress',function (e) {
    //KeyCode定数を設定
    if(e.keyCode == 13) {
        box = $(this);
        t_val = $(box).val();

         //未入力の場合は受け付けない
        if(t_val.length > 0) {
            //打ち込んだ内容が反映されるボックスを生成
            $(this).prev().append('<div id="user">'+t_val+'</div>');
            $(box).val("");
        }
        e.preventDefault();
    }                                               
});

css

#user{
    border-top:1px solid #fff;  
    border-bottom:1px solid #ddd;  
    padding:15px;
    margin-bottom:0;
    background:#eee;
    
}

#parent{
       width:500px;
    border:1px solid #ccc;   

}
textarea{padding:5px;}

html

<div id="parent">
</div>
type! <textarea id="text" rows="1" cols="20">
</textarea>

via

How to disable Enter/Return Key After a function is executed because of it? – Stack Overflow


Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7

Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7