Angularjs实现双击编辑

半兽人 发表于: 2024-07-04   最后更新时间: 2024-07-04 13:47:51  
{{totalSubscript}} 订阅, 374 游览

双击编辑

这个示例,可以实现双击编辑功能,双击文本时可以进入编辑模式,编辑完成后失去焦点或者按下回车键可以保存编辑内容。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/user/js/angular-1.5.8.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap/5.3/bootstrap.min.css">
</head>
<body ng-app="MyModule">
    <div class="mb-3 row" ti-editable-input>
        <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
        <div class="col-sm-10">
            <input type="text" readonly  class="form-control-plaintext" id="staticEmail" value="email@example.com">
        </div>
    </div>
</body>
<script>
    var myModule = angular.module("MyModule", []);

    //注射器加载完所有模块时,此方法执行一次
    myModule.run(function () {});

    myModule.directive("tiEditableInput", function () {
        return {
            restrict: 'A',
            link: function (scope, element) {
                var inputElement = element.find('input');
                element.on('dblclick', function() {
                    if (inputElement.length) {
                        inputElement.attr('readonly', false);
                        inputElement.removeClass('form-control-plaintext');
                        inputElement.addClass('form-control');
                        inputElement[0].focus();
                    }
                });
                inputElement.on('blur', function() {
                    restoreReadonly();
                });
                inputElement.on('keyup', function(event) {
                    if (event.keyCode === 13) { // 回车键的键码是13
                        restoreReadonly();
                    }
                });
                function restoreReadonly() {
                    if (!inputElement.attr('readonly')) {
                        inputElement.attr('readonly', true);
                        inputElement.removeClass('form-control');
                        inputElement.addClass('form-control-plaintext');
                    }
                }
            }
        };
    });
</script>
</html>

在线运行

双击编辑,有确认和取消

双击之后,显示「确认」和「取消」按钮。

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <script src="/user/js/angular-1.5.8.min.js"></script>
    <link rel="stylesheet" href="/css/bootstrap/5.3/bootstrap.min.css">
</head>
<body ng-app="MyModule">
    <div class="mb-3 row" ti-editable-input>
        <label for="staticEmail1" class="col-sm-2 col-form-label">Email 1</label>
        <div class="col-sm-10">
            <input type="text" readonly class="form-control-plaintext" id="staticEmail1" value="email1@example.com">
        </div>
    </div>
</body>
<script>
    var myModule = angular.module("MyModule", []);

    myModule.directive("tiEditableInput", function ($compile) {
        return {
            restrict: 'A',
            scope: {},
            link: function (scope, element) {
                var inputElement = element.find('input');
                var originalValue;
                var buttonsElement;

                inputElement.on('dblclick', function() {
                    originalValue = inputElement.val();
                    inputElement.attr('readonly', false);
                    inputElement.removeClass('form-control-plaintext');
                    inputElement.addClass('form-control');
                    inputElement[0].focus();

                    // 移除当前输入框内之前的按钮(如果有)
                    removeActionButtons();

                    // 动态添加确认和取消按钮
                    var buttonsHtml = '<div class="action-buttons mt-2">' +
                                      '<button type="button" class="btn btn-primary btn-sm me-2" ng-click="confirm()">确认</button>' +
                                      '<button type="button" class="btn btn-secondary btn-sm" ng-click="cancel()">取消</button>' +
                                      '</div>';
                    buttonsElement = $compile(buttonsHtml)(scope);
                    element.append(buttonsElement);
                });

                scope.confirm = function() {
                    saveChanges();
                };

                scope.cancel = function() {
                    cancelChanges();
                };

                function saveChanges() {
                    inputElement.attr('readonly', true);
                    inputElement.removeClass('form-control');
                    inputElement.addClass('form-control-plaintext');
                    removeActionButtons();
                }

                function cancelChanges() {
                    inputElement.val(originalValue);
                    inputElement.attr('readonly', true);
                    inputElement.removeClass('form-control');
                    inputElement.addClass('form-control-plaintext');
                    removeActionButtons();
                }

                function removeActionButtons() {
                    if (buttonsElement) {
                        buttonsElement.remove();
                        buttonsElement = null;
                    }
                }
            }
        };
    });
</script>
</html>

在线运行

更新于 2024-07-04

查看AngularJS更多相关的文章或提一个关于AngularJS的问题,也可以与我们一起分享文章