angularJS键盘录制功能实现

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

 2171  30  查看评论 (7)
angularJS键盘录制功能实现 ie兼容9

使用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);

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

jquery标记编辑器插件Tag Editor

Tag Editor是一个功能强大的和轻量级jQuery标记编辑器插件。
  丰富的输入
 19824  60

电子签章电子签名

H5画板实现电子签名可生成图片,代码简单注释全
  丰富的输入
 3391  64

jQuery模拟虚拟键盘带中文拼音输入

jQuery虚拟键盘带中文拼音输入
  丰富的输入
 3787  14

富文本编辑器NicEdit

NicEdit是一个轻量级,跨平台的Inline Content Editor。NicEdit能够让任何 element/div变成可编辑或者能够把标准的TextArea转换成富文本编辑器。
  丰富的输入
 17721  43

讨论这个项目(7)回答他人问题或分享插件使用方法奖励jQ币

    houxiangpeng 0
    2017/6/7 10:23:20

    后续我会更新融入键盘插件,回放的时候有键盘键入的特效

    另外,我有考虑融入PaaS理念的websocket进来,让您亲自感受手机输入内容PC实时响应的效果。

        areyouOk0
        2017/6/7 12:31:18

        非常好,如果输出的数据可以小一些的话就完美了。

        houxiangpeng1
        2017/6/7 13:56:59

        你说的是,其实在设计中期我有考虑过这个问题,当时想的是时间戳记录新增内容,这样可以巨大幅度减少数据。

        不过,如果您在输入的时候光标手动点到了字符串中间,比如您先输入“你好”,然后您在“好”中间输入“们”,结果是:“你们好”,但是数据会按照顺序记录新增数据,自动重放的时候就是这样:“你好们”,由于这个录制、回放功能只是心血来潮的想法想实现它,因此就没多花费时间去思考优化的瓶颈问题。

        如果各位有啥思路可以提出~

        . error0
        2017/6/8 9:26:10

        回放时文本框变灰应该就可以让输出少点了吧

        houxiangpeng0
        2017/6/8 15:19:59

        @.error

        没太理解您说的意思。这个代码在记录的时候对每次输入的内容是做全局记录的,因此数据量会很多,只是我故意将数据量展现给大家看(我完全可以不展现)。我的目的只是想让大家直观的看到该部分代码的实现思路,优缺点看的很明确。

    回复
    学习jq 0
    2017/6/7 9:26:08

    厉害了。貌似好像用不到

        houxiangpeng0
        2017/6/8 15:25:19

        或许在某种情况下可以用的上。

        当然,这只是一个想法并且的到了初步的实现,我认为该思路用于记录鼠标的移动轨迹可以可以做到的,记录完毕后重放的时候只需要用一个鼠标样式的“div”来移动重放即可达到效果。

        或许,在将来会出现一个全程式引导组件api,您可以自己录制引导过程,而不用代码写死坐标点。

        不过,我曾经在我用javascript写的一款非H5的赛车游戏(2D支持拐弯、加速、刹车、摩擦系数等),并且我有用该思路做到了赛车行驶的轨迹记录。

        我曾经幻想过,js写出赛车游戏后,可以全过程回放您跑出来的赛道记录 ^ ^.

    回复
取消回复