angularJS键盘录制功能实现

所属分类：输入-丰富的输入,自动完成

22438 338 查看评论 (9)

分享到微信朋友圈

查看演示立即下载

插件描述：使用angularJS的监听事件对键盘的输入进行双向数据绑定支持录制、回放

使用angularJS的监听事件对键盘的输入进行双向数据绑定,支持录制、回放功能。

使用方法：

1. 引入jquery库

2. 引入angularJS库

3. 将angularJS源码封装成js文件引入

4. 页面写如下html即可

5.可以使用angularJS的directive对html进行指令封装（这里就不多赘述）

下面是源码简介：

// 初始化介绍(这里给您准备了教科书式的即时演示)
$scope.init = function() {
    // 首次进来不初始化介绍无法操作其他功能.
    $scope.canWork = true;

    $scope.console = "now introducing..."
    // 正在介绍
    $scope.initing = true;
    $rootScope.source = {};
    $rootScope.source = $scope.speedUp(2);
    $scope.replay('msg', true);
}
// 开始录制
$scope.start = function() {
    // 先全部终止一下
    $scope.stop();
    $scope.msg = "";
    // 正在录制
    $scope.starting = true;
    $scope.console = "";
    console.log("now start.");
    $scope.console = "now start."
    $scope.watch = $scope.$watch('msg', function(newValue, oldValue) {
        if (newValue === oldValue) {
            $scope.cacheMsg = "";
            console.log("init watch.");
            $scope.console = "init watch."
            $rootScope.source = {};
            $rootScope.startTime = new Date();
            $scope.placeholder = "请输入内容, 输入完毕后点击结束录制, 点击回放可以看到效果.";
            return;
        }
        $scope.console = "watching..."
        // 提升四倍速度, 因为replay函数在谷歌浏览器下的最快只能250针左右, 这里的提升相当于模拟1000fps.
        var fastLevel = 4;
        var longtime = Math.floor(((new Date()) - $rootScope.startTime) / fastLevel);
        $rootScope.source[longtime] = newValue;
        $scope.cacheMsg = newValue;
    });
}

// 结束录制
$scope.stop = function(isShowAll) {
    $scope.console = "stopping."
    console.log("stopping.");
    if ($scope.watch) {
        $scope.watch();
    }
    // 终止所有的动作
    $scope.initing = false;
    $scope.starting = false;
    $scope.replaying = false;
    clearInterval($scope.code);
    console.log("stopped.");
    $scope.console = "stopped."

    if (isShowAll) {
        $scope.showAll();
    }
}

// 显示所有
$scope.showAll = function() {
    $scope.msg = "";
    $scope.msg = $rootScope.source[$scope.maxTimes];
}

// 回放
$scope.replay = function(bind, notNeedStop) {
    if (!notNeedStop) {
        $scope.stop();
    }
    $scope.msg = "";
    $scope[bind] = !$scope[bind] ? "" : $scope[bind];
    // 正在回放
    $scope.replaying = true;
    $scope.times = 0;
    $scope.maxTimes = 0;
    if (!$rootScope.source || JSON.stringify($rootScope.source) == "{}") {
        delete $rootScope.source;
        console.log("return.");
        $scope.replaying = false;
        return;
    } else {
        for (var key in $rootScope.source) {
            $scope.maxTimes = key;
        }
    }
    $scope.startTime = new Date();

    $scope.code = setInterval(function() {
        $scope.times++;

        if ($scope.times == $scope.maxTimes) {
            console.log(((new Date() - $scope.startTime)) / $scope.maxTimes);
            $scope.stop();
        }
        var msg = $rootScope.source[$scope.times];
        if (msg) {
            $scope[bind] = msg;
        }
        $scope.$apply();
        // 这里的1表示1毫秒一次, 理论上想达到1秒1000针的效果, 但实际上只能250fps
    }, 1);
}
// 加速api, 对于已经录制好的source进行二次加速(在原有的默认4倍的情况下进行加速)
$scope.speedUp = function(speed) {
var a = $rootScope.source;
var b = {};
for (var key in a) {
    b[Math.floor(key / (speed || 2))] = a[key];
}
return b;
}

});
// 扩展对textarea样式的支持
window.onload = function() {
    var input = $('#input');
    input.attr("cacheRows", 3);

    setInterval(function() {
        var nowRows = input.val().split(/\n/).length;
        if (nowRows != input.attr("cacheRows")) {
            input.attr("rows", nowRows + 2);
            input.attr("cacheRows", nowRows);
            // console.log("textarea自适应.");
        }
    }, 100);

}

电子签章电子签名

滑动页面特效

相关插件-丰富的输入,自动完成