angularJS键盘录制功能实现

所属分类： JQ特效输入自动完成

查看演示立即下载

插件描述：使用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);
 
}

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效：滑动页面特效
下一个特效：电子签章电子签名