一、说明

取消事件的默认动作。

该方法将通知 Web 浏览器不要执行与事件关联的默认动作(如果存在这样的动作)。例如,如果 type 属性是 "submit",在事件传播的任意阶段可以调用任意的事件句柄,通过调用该方法,可以阻止提交表单。注意,如果 Event 对象的 cancelable 属性是 fasle,那么就没有默认动作,或者不能阻止默认动作。无论哪种情况,调用该方法都没有作用。

二、语法

event.preventDefault()

三、示例

3.1 阻止<a>元素跳转

<a href="//blog.mazey.net/" target="_blank" id="a-prevent">点击我看会不会跳转</a>
<script>
document.getElementById('a-prevent').addEventListener('click',function(e){
    var eObj = e || window.event;
    eObj.preventDefault();
});
</script>

点击我看会不会跳转

3.2 禁止<input>元素键盘输入

<input type="text" id="input-prevent" placeholder="试试能不能输入" />
<script>
document.getElementById('input-prevent').addEventListener('keypress',function(e){
    var eObj = e || window.event;
    eObj.preventDefault();
});
</script>

JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标

JavaScript通过preventDefault()使input[type=text]禁止输入但保留光标的更多相关文章

  1. <input type="text"/>未输入时属性value的默认值--js学习之路

    在百度ife刷题是自己的一个错误引发了我对<input type="text"/>的学习. 先贴代码: <!DOCTYPE html> <html&g ...

  2. input[type=text]点击之后无边框, 一进页面就显示光标

    1.input[type=text]点击之后无边框 :outline:none; 2. 一进页面就显示光标: <script Language="javascript"> ...

  3. JQuery获取input type="text"中的值的各种方式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js让text值不可改变,同<input type="text" readonly="readonly" />

    <input type="text" size="60"  name="j01" value="www.52jscn.com ...

  5. chrome下input[type=text]的placeholder不垂直居中的问题解决

    http://blog.csdn.net/do_it__/article/details/6789699 <input type="text" placeholder=&qu ...

  6. html5与js关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的value点击全选状态onclick="select();"。做购物车页面时会要用到。

    关于input[type='text']文本框value改变触发事件一些属性的区别oninput,onpropertychange,onchange和文本框的点击全选状态onclick="s ...

  7. html <input type="text" />加上readonly后在各种浏览器的差异。

    <html> <body> <p>Name:<input type="text" name="email" /> ...

  8. <input type="text">和<textarea>的区别

    在我们开发时经常需要用到输入框,通常解决办法就是<input type="text">和<textarea>,那么这两个标签有什么区别呢?  一:<i ...

  9. HTML:<input type="text">文本框不可编辑的方式

    1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本 ...

随机推荐

  1. android 内部类的优化

    developer.android.com 文档中有一篇关于性能的文章,里面提到了内部类的使用.文章建议"对于私有内部类 使用 包訪问权限取代私有权限訪问", 这里说的是在内部类訪 ...

  2. MVC的优缺点

    MVC的优点 大部分用过程语言比如ASP.PHP开发出来的Web应用,初始的开发模板就是混合层的数据编程.例如,直接向数据库发送请求并用HTML显示,开发速度往往比较快,但由于数据页面的分离不是很直接 ...

  3. NodeJS在CentOs7下安装

    node下载地址:https://nodejs.org/en/download/ 1.安装gcc $ yum install gcc-c++ 2.解压最新版本 $ mkdir /usr/local/n ...

  4. STL vector的构造函数和析构函数(2)

    原文来自:点击打开链接 译文: public member function vector的构造器:这里我仅仅翻译C++11的,C++98的就不翻译了. 构造器原型: <vector> s ...

  5. Spring Boot(五):Spring Boot的启动器Starter大全及自定义Starter

    现有启动器Starter目录 Spring Boot应用启动器基本的一共有44种,具体如下: 1)spring-boot-starter 这是Spring Boot的核心启动器,包含了自动配置.日志和 ...

  6. Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php  c#.Net

    Atitit. 数据库-----catalog与schema的设计区别以及在实际中使用 获取数据库所有库表 java jdbc php  c#.Net 1. -catalog与schema的设计区别1 ...

  7. Android JNI和NDK学习(03)--动态方式实现JNI(转)

    本文转自:http://www.cnblogs.com/skywang12345/archive/2013/05/23/3092491.html 前面总结了静态实现JNI的方法,本文介绍如何动态实现J ...

  8. script 标签里的 async 和 defer

    无 async 和 defer 浏览器立即加载并执行指定脚本(读到即加载并执行),阻塞文档解析 async 脚本的加载执行和文档的加载渲染 并行. defer 脚本的加载和文档的加载渲染并行,但脚本的 ...

  9. AutoLayout详解+手把手实战(转载)

    首先说一下这篇博客虽然是标记为原创,但是事实并非本人亲自写出来的,知识点和例子本人花了一天各处查 找和整理最终决定写一个汇总的详解,解去各位朋友到处盲目查找的必要,因为不是转载某一个人的内容,故此不标 ...

  10. 如何创建Windows定时任务

    我们经常使用电脑,有没有那么一个瞬间想着要是电脑可以每隔一段时间,自动处理一件事情就好了呢? 其实Windows还真有这样的功能,很多软件检测更新就是通过这个方法实现的. 这次我们来做一个简易的喝水提 ...