Question

我有代码狙击，当我不得不在其上添加datepicker时启动的问题非常有用。

工作样本：

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

添加datepicker，我在$(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键== 13所以我可以使用GET发送日期到服务器，问题是，当我点击页面小部件上的任何地方重新打开时我尝试了很多调整以使其消失但我真的不知道该怎么做我被卡住了。

我想提一下网站使用bootstrap v3.1.1和jquery 1.11.1

Fiddle

添加小提琴，如果我删除

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

然后我不能留下可编辑的字段，但如果我离开那部分代码，我就无法使用日期选择工作。选择日期后，应该再次关注可编辑字段，以便用户可以单击“输入”以发送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

如何将datepicker功能添加到动态可编辑的表列

1 个答案: