如何将日期选择器功能添加到动态可编辑的表列

Question

我的代码狙击效果很好，当我不得不在它上面添加日期选择器时问题就开始了。

工作样本：

<td 
    id="test_<?php echo $id; ?>" 
    title="Double click to edit"
    class="editable" 
    name="ExpiryDate_<?php echo $id; ?>"
>
    <?php echo $Expiry_Date; ?>
</td>

 <script>
    $(document).ready(function () {

        $(".editable").dblclick(function () {

            var OriginalContent = $(this).text();

            var pieces = $(this).attr("name");
            ID= pieces;
            var count = 1;

            $(this).addClass("cellEditing");
            count += 1;
            $(this).html("<input id='t1_"+count+"'placeholder='Click to open calendar' type='text'  value='' />");

            $(this).children().first().focus();


            $(this).children().first().keypress(function (e) {
                if (e.which == 13) {
                    var option = confirm('Are you sure u wanna change');

                    if(option){
                   ..
                    //Call the server side file to communicate with database.
                   //send do some staff mostly send GET xmlhttp.send();
                 ..
                }
            });

            $(this).children().first().blur(function(){
            $(this).parent().text(OriginalContent);
            $(this).parent().removeClass("cellEditing");
            });
        });

        </script>

添加日期选择器我在下面添加：$(this).children().first().focus();

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

和 这个 datepicker 效果很好我可以让 dapicker 动态显示，单击日期而不关闭我的可编辑字段，并且在 datepick 小部件上获得密切关注返回可编辑字段，我可以单击 Enter key==13 这样我就可以使用 GET 将日期发送到服务器，问题是当我单击页面小部件上的任意位置时，我尝试了很多调整以使其消失，但我真的不知道该怎么做，我被卡住了。

我要提到的站点使用 bootstrap v3.1.1 和 jquery 1.11.1

Fiddle

添加小提琴，如果我删除

$(this).children().first().blur(function(){
        $(this).parent().text(OriginalContent);
        $(this).parent().removeClass("cellEditing");
        });

然后我不能离开可编辑字段，但如果我离开那部分代码，我不能让 datepick 工作。选择日期后，它应该再次关注可编辑字段，以便用户可以单击 Enter 发送 GET

Answer 1

也许你应该提供一些小提琴，但从我可以看到错误的代码行是：

var origFocus = document.activeElement;
$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              origFocus.focus();
                        });

您不应该将焦点设置在 origFocus 变量上，因为这样做会重新将焦点应用于元素。试试这些选项：

$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              document.activeElement.focus();
                        });

或

$("input[id *='t1_']").on('click',function() {
      $(this).datepicker({
                        dateFormat: "dd-mm-yy"
                        }).focus();
       }).blur(function(){
              document.activeElement = null;
                        });

或者根本不设置blur 处理程序。

编辑

好的，我清理了一下。希望对你有帮助

jsfiddle