关于angularjs框架中input按回车事件光标跳转到另一个input上

我们项目里用到angularjs 对应的包,没有ng-keypress\ng-keydown。
所以,我们自己写一些指令。
首先在,项目模块对应的module.js中写指令

define([
    ‘angular‘,
    ‘angular-couch-potato‘,
    ‘angular-ui-router‘,
    ‘angular-resource‘
],  function (ng, couchPotato) {
    ‘use strict‘;

    var module = ng.module(‘app.handOverWithdrawals‘, [
        ‘ui.router‘,
        ‘ngResource‘
    ]);

     ##在html页面中 设置angularjs全局的指令属性
    module.directive(‘searchinput‘, function () {
                return {
                    restrict: ‘A‘,
                    controller: function(){
                        var allInputs = [];
                        this.getAll = function( ele ){
                            allInputs.push( ele );
                        };
                        this.focusInput = function( ele ){
                            angular.forEach(allInputs, function( input,index ) {
                                //if (ele === input) {
                                //    allInputs[index+1][0].focus();
                                //}
                                if ( ele === input && allInputs[index+3] ) {
                                    allInputs[index+3][0].focus();
                                }
                            });
                        };

            }
        };
    });
##在html页面中input输入框,设置angularjs回车换行指令属性
    module.directive(‘enternextline‘, function () {
        return {
            restrict: ‘A‘,
            require : ‘^searchinput‘,
            link: function (scope, element, attrs, searchinputCtrl) {
                searchinputCtrl.getAll( element );
                element.bind(‘keypress‘,function(event){
                    if(event.keyCode == ‘13‘){
                        searchinputCtrl.focusInput( element );
                    }
                });
            }
        };
    });
      couchPotato.configureApp(module);

    module.run(function($couchPotato){
        module.lazy = $couchPotato;
    });

    return module;

});

html页面:
<form  class="smart-form" id="checkout-form"  searchinput>
<div  class="col col-lg-2">
      <section>
          <div class="form-group">
              <input type="text" `enternextline` name="count_wzq" data-ng-model="list.count_wzq" style="text-align:right;"  onkeyup="value=this.value.replace(/[^0-9\-\+]/gi,‘‘)" ng-change="onChange(this)">
     </div>
 </section>
</div>
</form>

######值得注意的是: 按下回车 与提交表单按钮;当输入框是多个时。
 <button type="button" class="btn btn-primary btn-sm" data-ng-click="createOutClick(userList,arrayValueKey)">
                                    保存
                                </button>
######如果 type=button 则回车不会提交表单;
 <button type="submit" class="btn btn-primary btn-sm" data-ng-click="createOutClick(userList,arrayValueKey)">
                                    保存
                                </button>
######如果 type=submit则回车会提交表单;
时间: 2024-10-11 05:09:23

关于angularjs框架中input按回车事件光标跳转到另一个input上的相关文章

在zend framework框架中try{}catch(Exception e){}的跳转问题

请勿盗版,转载请加上出处http://blog.csdn.net/yanlintao1 首先我先说明我遇到的问题 try{ //导入学生信息 $ModelStudent->insert($data2); } catch (Exception $e) { unlink(DOCS_PATH.'/student.xls'); $this->view->str = '导入失败,请检查数据格是否正确!'; $this->_forward("error","glo

(八)简单了解下angularJS框架中NB的双向数据绑定机制,大大减少需要重复的开发代码量

之前写的第一篇angularJS入门文章 ,介绍ng-model的时候提到:使用angularJS的双向数据绑定机制,不需要我们编写繁琐的代码来实现同样的功能.现在我们看一个比较震撼的例子,看看angularJS是如何减少我们在前端开发中的繁琐劳动的.越是感受到框架功能的强大,越是能够激发学习的兴趣和动力. 假如我们有一个学生信息列表,包含学生的姓名.地址和年龄信息.假如这个数据源信息保存在data.js文件中. var g_phones = [ <span style="white-sp

Spring 4.2框架中注释驱动的事件监听器详解

事件交互已经成为很多应用程序不可或缺的一部分,spring框架提供了一个完整的基础设施来处理瞬时事件.下面我们来看看Spring 4.2框架中基于注释驱动的事件监听器. 1.早期的方式 在早期,组件要从Spring事件获知自定义域事件中获取通知,那么组件必须实现ApplicationListener接口并覆写onApplicationEvent方法. @Component class OldWayBlogModifiedEventListener implements ApplicationLi

Spring 框架中注释驱动的事件监听器详解

事件交互已经成为很多应用程序不可或缺的一部分,Spring框架提供了一个完整的基础设施来处理瞬时事件.下面我们来看看Spring 4.2框架中基于注释驱动的事件监听器. 1.早期的方式 在早期,组件要从Spring事件获知自定义域事件中获取通知,那么组件必须实现ApplicationListener接口并覆写onApplicationEvent方法. @Component class OldWayBlogModifiedEventListener implements ApplicationLi

Jquery 实现input回车时跳转到下一个input元素

/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INPUT 元素列表] * @return {[type]} [description] */ function keydown_to_tab($input){ if(!$input) $input = $('input:text:not(:disabled)'); $input.bind("keydown&

Spring框架中不同类型的事件

ContextRefreshedEvent,ApplicationContext初始化或者被更新是会触发,ConfigurableApplicationContext接口中的refresh()方法被调用会触发 ContextStartedEvent,,ConfigurableApplicationContext接口中的start()方法被调用会触发 ContextStoppededEvent,,ConfigurableApplicationContext接口中的stop()方法被调用会触发 Co

element-ui input 组件 回车事件

直接在el-input 标签上添加@keyup.enter="funName" 是不起作用的,在组件中使用需要加上.native. <el-input v-model = "value"@keyup.enter.native="funName"></el-input> 原文地址:https://www.cnblogs.com/toyNotes/p/9264934.html

【转发】jQuery给input绑定回车事件

<script type="text/javascript" src="Scripts/jquery-1.6.2.js"></script> <script language="javascript" type="text/javascript"> //方法一如下 $(function(){ $('#dataInput').bind('keypress',function(event){ i

如何让UIView中的Button点击之后跳转到另一个ViewController上去,ViewController上也有一个按钮 可以返回

第一种方法:如果使用导航第一个按钮方法:[self.navigationController pushViewController:secondVC animated:YES];第二个按钮方法:[self.navigationController popViewControllerAnimated:YES]; 第二种方法:如果使用模态第一个按钮方法:[self presentViewController:secondVC animated:YES completion:nil];第二个按钮方法: