双击编辑
这个示例，可以实现双击编辑功能，双击文本时可以进入编辑模式，编辑完成后失去焦点或者按下回车键可以保存编辑内容。
<!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>
