[msg-reply]set cursor position of reply-input;improved reply js

group/templates/group/group_reply_list.html

@@ -12,6 +12,6 @@
 </li>
 {% endfor %}
 </ul>
-<input type="text" name="message" class="reply-input" value=""/>
+<textarea name="message" class="reply-input"></textarea>
 <button class="submit">回复</button>
 <p class="error hide">输入不能为空且应少于150个字符。</p>

group/templates/group/msg_reply_js.html

@@ -8,7 +8,8 @@ $('.reply, .replyclose').hover(
 );
 $('.reply').click(function() {
     var msg_id = $(this).attr('data'),
-        msg_bd = $(this).parent();
+        msg_bd = $(this).parent(),
+        reply_cnt = msg_bd.find('.reply-cnt');
     $.ajax({
         url: '{{ SITE_ROOT }}group/reply/' + msg_id + '/',
         dataType: 'json',
@@ -16,11 +17,16 @@ $('.reply').click(function() {
         contentType: 'application/json; charset=utf-8',
         success: function(data) {
             msg_bd.children('.reply-bd').html(data['html']).attr('class', 'reply-bd');
-            msg_bd.find('.reply-at').click(function() {
+            var reply_input = msg_bd.find('.reply-input'),
-                msg_bd.find('.reply-input').val('@' + $(this).attr('data') + ' ').focus();
+                error = msg_bd.find('.error');
-            });
+            function handleReplyInput() {
+                reply_input.val('@' + $(this).attr('data') + ' ');
+                var pos = reply_input.val().length;
+                setSelectionRange(reply_input[0], pos, pos);
+            }
+            msg_bd.find('.reply-at').click(handleReplyInput);
             msg_bd.find('.submit').click(function() {
-                var reply = $.trim(msg_bd.find('.reply-input').val());
+                var reply = $.trim(reply_input.val());
                 if (reply && reply.length <= 150) {
                     $.ajax({
                         type: "POST",
@@ -32,17 +38,14 @@ $('.reply').click(function() {
                         data: "message=" + reply,
                         success: function(data) {
                             msg_bd.find('.reply-list').append(data['html']);
-                            msg_bd.find('.reply-input').val('');
+                            reply_input.val('');
-                            msg_bd.find('.error').attr('class', 'error hide');
+                            error.attr('class', 'error hide');
-                            var reply_cnt = parseInt(msg_bd.find('.reply-cnt').html()) + 1 || 1; 
+                            reply_cnt.html((parseInt(reply_cnt.html()) + 1 || 1) + ' ');
-                            msg_bd.find('.reply-cnt').html(reply_cnt + ' ');
+                            msg_bd.find('.reply-at').click(handleReplyInput);
-                            msg_bd.find('.reply-at').click(function() {
-                                msg_bd.find('.reply-input').val('@' + $(this).attr('data') + ' ').focus();
-                            });
                         }
                     });
                 } else {
-                    msg_bd.find('.error').removeClass('hide');
+                    error.removeClass('hide');
                 }
             });
         }
@@ -56,3 +59,17 @@ $('.replyclose').click(function() {
     $(this).addClass('hide');
     $(this).prev().removeClass('hide'); // show 'reply'
 });
+
+function setSelectionRange(input, selectionStart, selectionEnd) {
+  if (input.setSelectionRange) {
+    input.focus();
+    input.setSelectionRange(selectionStart, selectionEnd);
+  }
+  else if (input.createTextRange) {
+    var range = input.createTextRange();
+    range.collapse(true);
+    range.moveEnd('character', selectionEnd);
+    range.moveStart('character', selectionStart);
+    range.select();
+  }
+}

group/templates/group/new_msg_reply.html

@@ -44,7 +44,7 @@
                         </li>
                         {% endfor %}
                     </ul>
-                    <input type="text" name="message" class="reply-input" value="" />
+                    <textarea name="message" class="reply-input"></textarea>
                     <button class="submit">回复</button>
                     <p class="error hide">输入不能为空且应少于150个字符。</p>
                 </div>
@@ -62,12 +62,18 @@
 <script type="text/javascript">
 {% include 'group/msg_reply_js.html' %}
 $('.reply-at').click(function() {
-    $(this).parent().parent().parent().next().val('@' + $(this).attr('data') + ' ').focus();
+    var reply_input = $(this).parent().parent().parent().next();
+    reply_input.val('@' + $(this).attr('data') + ' ');
+    var pos = reply_input.val().length;
+    setSelectionRange(reply_input[0], pos, pos); 
 });
 $('.reply-bd .submit').click(function() {
     var msg_bd = $(this).parent().parent(),
         msg_id = msg_bd.find('.reply').attr('data'),
-        reply = $.trim($(this).prev().val());
+        reply_cnt = msg_bd.find('.reply-cnt'),
+        reply_input = $(this).prev(),
+        reply = $.trim(reply_input.val()),
+        error = $(this).next();
     if (reply && reply.length <= 150) {
         $.ajax({
             type: "POST",
@@ -79,17 +85,18 @@ $('.reply-bd .submit').click(function() {
             data: "message=" + reply,
             success: function(data) {
                 msg_bd.find('.reply-list').append(data['html']);
-                msg_bd.find('.reply-input').val('');
+                reply_input.val('');
-                msg_bd.find('.error').attr('class', 'error hide');
+                error.attr('class', 'error hide');
-                var reply_cnt = parseInt(msg_bd.find('.reply-cnt').html()) + 1 || 1; 
+                reply_cnt.html(parseInt(reply_cnt.html()) + 1 + ' ');
-                msg_bd.find('.reply-cnt').html(reply_cnt + ' ');
                 msg_bd.find('.reply-at').click(function() {
-                    msg_bd.find('.reply-input').val('@' + $(this).attr('data') + ' ').focus();
+                    reply_input.val('@' + $(this).attr('data') + ' ');
+                    var pos = reply_input.val().length;
+                    setSelectionRange(reply_input[0], pos, pos); 
                 });
             }
         });
     } else {
-        $(this).next().removeClass('hide'); // show 'error'
+        error.removeClass('hide');
     }
 });
 </script>

media/css/seahub.css

@@ -739,6 +739,10 @@ p {
 }
 .reply-input {
     width:82%;
+    padding:0 1px;
+    height:20px;
+    line-height:20px;
+    vertical-align:bottom;
 }
 .reply-at {
     font-size:12px;