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

一、说明

取消事件的默认动作。

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

二、语法

event.preventDefault()

三、示例

3.1 阻止<a>元素跳转

<a href="http://www.mazey.net/baby/blog" 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]禁止输入但保留光标

时间: 2024-10-23 17:54:20

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

JQuery获取input type=&quot;text&quot;中的值的各种方式

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery获取文本框的值</title> <meta http-equ

&lt;input type=&quot;text&quot;/&gt;未输入时属性value的默认值--js学习之路

在百度ife刷题是自己的一个错误引发了我对<input type="text"/>的学习. 先贴代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>example</title> </head> <body> <label for="weather_input"

html中去掉文本框(input type=&quot;text&quot;)的边框或只显示下边框

去掉: <input   type="text"   name="textfield"   style="border:0px;">只留下边框: <input type="text" style="BORDER-TOP-STYLE: none; BORDER-RIGHT-STYLE: none; BORDER-LEFT-STYLE: none; BORDER-BOTTOM-STYLE: solid&

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

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

ie7下的&lt;input type=&quot;text&quot;&gt;高度

之前很少去做低版本浏览器兼容,由于公司为一些使用低版本浏览的客户着想,所以并没有抛弃IE7.当时做页面的时候我用的是bootstrap,但是很可惜的是不兼容IE7,当使用IETester中的ie7查看页面的时候页面错乱,内容部分消失.我只好根据页面当时情况进行调整,当我设置<input type="text">的时候,我发现给的高度跟实际的不符合,后来仔细观察发现,ie7下的<input type="text">是你给的高度+padding,

jquery对所有&lt;input type=&quot;text&quot;的控件赋值

function resetData() {      $("input[type=text]").each(      function() {     $(this).attr("value","");      }      );  }

input type =text,按回车键自动提交

1.当form表单中只有一个<input type="text" name='name' />时按回车键将会自动将表单提交 <form id='form1' action='a1.jsp' method='post'> <input type='text' name='name' /> </form> 再添加一个<input type="text"/>按下回车将不会自动提交,但是页面上显示一个不知所云的输入

HTML:&lt;input type=&quot;text&quot;&gt;文本框不可编辑的方式

1.<input type="text" name="name" value="姓名" disabled /> 该方式显示的文本框内容“姓名”呈灰色显示. 2.<input type="text" name="name" value="姓名" readonly="readonly" /> 文本框正常显示,只是无法获得光标,不能编辑. 3.<

(原)css属性选择器定义 优先级问题 (input[type=text])

今天遇到一个问题调试了很久,关于css的优先级问题. 像常规的id选择器(#test) > 类选择器class(.test) > 标签选择器input (中间还有一些类型不详举了),相比大家都很清楚 这次遇到就是input[type=text] {background:red} 和 类选择器 .aa{background:black} 的优先级问题(aa是定义在input 的class上). 举例如下: <html> <style> input{ background: