一、说明

取消事件的默认动作。

该方法将通知 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. 【C++基础 03】do...while(0)妙用

    我的主题是,有时候知道一些细节会让你写出更好的代码. ============================================ 之前学coocs2d-x的时候,发现有非常多do...w ...

  2. Objective-C之成魔之路【19-归档】

    郝萌主倾心贡献,尊重作者的劳动成果,请勿转载. 假设文章对您有所帮助.欢迎给作者捐赠.支持郝萌主,捐赠数额任意,重在心意^_^ 我要捐赠: 点击捐赠 Cocos2d-X源代码下载:点我传送 在Obje ...

  3. 由于删除DBF文件报错 —— ORA-01033: ORACLE initialization or shutdown in progress

    由于移动或删除DBF文件报错:ORA-01033: ORACLE initialization or shutdown in progress   原因:一般该类故障通常是由于移动文件而影响了数据库日 ...

  4. python challenge答案参考

    Solutions to python challenge. http://garethrees.org/2007/05/07/python-challenge/ https://github.com ...

  5. Java代码Bug分析插件 FindBugs

    http://www.oschina.net/p/findbugs FindBugs是一个能静态分析源代码中可能会出现Bug的Eclipse插件工具.

  6. oracle linux 6 docker 安装

    docker对安装系统的内核版本有严格的要求,本文针对oracle linux 6.5进行讲解,其它系统参见: https://docs.docker.com/v1.5/installation/ 下 ...

  7. NPM的天坑: 解决ERR! code UNABLE_TO_VERIFY_LEAF_SIGNATURE

    各种下载失败,并不是镜像源的问题,哪怕切换淘宝源也无法下载.总之就像断网一般无法下载.无关网络. 解决方案: http://stackoverflow.com/questions/20747817/e ...

  8. MySQL 慢查询日志(Slow Query Log)

    同大多数关系型数据库一样.日志文件是MySQL数据库的重要组成部分.MySQL有几种不同的日志文件.通常包含错误日志文件,二进制日志,通用日志.慢查询日志.等等.这些日志能够帮助我们定位mysqld内 ...

  9. Google Chrome v48.0.2564.

    http://www.pcpop.com/doc/1/1819/1819996.shtml 摘要:谷歌浏览器Chrome Stable 稳定版迎来例行升级,新版本号为v48.0.2564.82,上一版 ...

  10. Debian 为nginx增加第三方模块

    为nginx增加第三方模块需要重新编译nginx的,但是debian在安装nginx的时候做了很多事情,比如systemd,/etc/nginx/里的各种文件,所以我们最好在debian源代码包的基础 ...