zoukankan      html  css  js  c++  java
  • js 给元素绑定回车事件

    经常会看到登录页面输入完账户密码,回车就登录了.实现方法:

    JQuery方法:

        $("#focus")为获取id为focus的元素
        $("#focus").keypress(function(event){
            if(event.which === 13) { 
                //点击回车要执行的事件
             }
        })

    JS方法:

    var focus = document.getElementById("focus");
    focus.onkeypress=function(event){
        if(event.which === 13) { 
            //点击回车要执行的事件
        }
    }

     =============================================================================================================

    移动端input呼出的键盘,换行(enter)变为搜索

    1.首先,input 要放在 form里面。

    2.  这时 "换行" 已经变成  “前往”,

    3.如果想变成 “搜索”,input 设置  type="search"

    =============================================================================================================

    移动端开发:使用搜索框时,键盘可以出现"搜索"俩字,并且可以"回车(Enter)"开始搜索......

    为了用户体验更好,在用户输入想要检索的内容后,键盘上需要赫然写着“搜索”两个字,并且因为用键盘的习惯问题,当按下“回车(Enter)”时也必须开始搜索,简便快捷。user用了都说好~~~

    <form action='' onsubmit="return false;"> 
    <span class="label">关键词:</span>
    <input type="search" placeholder="输入您想查询的关键词" id="myInput" /> </form>

    这里的form必须要,并且onsubmit也必须写,在Enter的时候才能有反应。
    另外,在JS中也要绑定search事件才行:

    $("#myInput").bind("search", function() {
        //要执行的方法
    });

    以上所有,便可以实现键盘上出现 搜索回车(Enter) 有效果。

    =============================================================================================================

    JS移动端如何监听软键盘回车事件

    移动端经常项目中会有搜索之类的功能,一般实现的是按搜索按钮进行搜索,如果要像PC端一样实现按回车键进行搜索该怎么实现呢?

    方法很简单,就是在搜索框的input外面套一个form标签  注意点:form标签一定得添加 action属性(可设置为空)

    1
    <form action=""><input type="text" name="search" /></form>

      移动端软键盘的回车会触发form的submit事件,所以我们只需要监听form的submit事件就可以实现按回车按钮进行搜索的功能

    1
    2
    3
    4
    var oForm =  document.getElementsByTagName("form")[0];
    oForm.onsubmit = function(){
        $scope.searchOrder();
    };

      题外话:我拿的ipad进行的测试 当input框外面套上form标签 并给form标签添加action属性后  软键盘上的return 会变成蓝色的Search.

  • 相关阅读:
    Supreme(ง •̀_•́)ง
    基于VS快速排序的单元测试
    POST GET
    Go对比其他语言新特性1(字符类型、类型转换、运算符、键盘输入、for、switch)
    四则运算问题
    软件工程第三次作业!
    Servlet
    结对编程1
    Kafka技术原理知识点总结
    KafkaStream简介
  • 原文地址:https://www.cnblogs.com/xiaoshen666/p/10755875.html
Copyright © 2011-2022 走看看