onFocus="this.blur()"

最新推荐文章于 2025-06-06 09:17:29 发布
转载 最新推荐文章于 2025-06-06 09:17:29 发布 · 2.2k 阅读 · 1

本文介绍了一种使用HTML和JavaScript实现的特殊文本框，通过添加onfocus=this.blur();属性，使得文本框在获得焦点时立即失去焦点，从而达到无法在文本框中输入任何文本的效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

<input name="result" id="result" type="text" onFocus="this.blur();" size="20" value="">

onfocus是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了

整个代码构成了”不能输入任何文本的文本框“。
参考链接：https://blog.youkuaiyun.com/fgdfgasd/article/details/8812694 感谢作者分享。

盲人站长深恶痛绝的onfocus=”this.blur()”
09-22
杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。
Web丨onfocus = "this.blur();" 这个语句是什么意思？
万人坑
07-15 2626
focus 是焦点事件，前面加 on 则表示在这个事件发生的时候同时执行等号后面的语句， “this.blur();” 就是让对象失去焦点的意思。总结就是：在对象获得焦点的同时使其失去焦点。开发中就是使设备不能通过焦点事件触发其辅助功能，比如说手机的数字键盘弹出。...
掌握JavaScript的onfocus与onblur事件监听
weixin_36074800的博客
06-06 1078
onfocus事件是当元素获得焦点时触发的事件。通常，这意味着用户已经点击了该元素，或者在输入字段中开始输入文本。在网页设计中，获得焦点并不限于输入字段；其他可交互元素如链接、按钮、甚至自定义控件都可以通过JavaScript来触发onfocus事件。要触发onfocus事件，用户行为是关键。例如，用户点击一个输入框，或者使用Tab键在表单元素间切换，触发的都是onfocus事件。除了直接的用户交互，还可以通过脚本代码设置或取消元素的焦点，比如会让id为myInput的元素获得焦点。
onFocus="this.blur()"的解释
10-09 597
onFocus="this.blur()" onFocus即获取焦点的意思，而blur却是失去焦点的意思，因此onFocus="this.blur()"的通俗理解就是：当获取焦点时立即失去焦点，听起来的确有点绕，那么这种方法到底有何使用价值呢？ 1、当你在使用一个文本框时，且在某种情况下有想让文本框不能操作（无法输入文本），这时可以使用onFocus="this.blur()"，即你...
A标签的虚线
caibinghong的专栏
05-20 571
    盲人站长深恶痛绝的onfocus=”this.blur()” 这篇文章是淘宝的妙净写的   杭州最美的季节里，淘宝无障碍访问改善小组有幸邀请到盲人在线站长——争渡读屏团队成员——杨永全同学和我们一起面对面交流网站无障碍访问方面的问题。杨同学使用电脑必须使用读屏软件，就像他看不到我们的脸必须靠声音识别我们一样。在谈到读屏软件操作页面时，他对我们前端的同学特别...
WEB前端 -- onfocus="this.blur()"
叶的博客
03-06 4033
focus是一个事件，前面加个on表示在这个事件发生的时候执行等号后面的预警，而blur()是this的一个方法，this.blur()就是让这个对象失去焦点。总之：作用就是在某对象获得焦点时使其失去焦点。这个语句仅仅是为了消除链接获取焦点（如tab键）后的虚线框&lt;body&gt; &lt;a href="#" &gt;第一个链接&lt;/a&gt; &lt;a href="#" &...
.hidden_a_line{ noline:expression(this.onfocus=this.blur); }
06-09
这是一段 CSS 代码，用于...它使用了一个 IE 特有的属性 expression，该属性可以让开发者在 CSS 中使用 JavaScript 表达式。...需要注意的是，由于 expression 属性是 IE 特有的，因此这段代码只能在 IE 浏览器中生效。
<a href="<%=path%>/gradeServlet" target="mainFrame" onFocus="this.blur()">学生成绩</a>
05-25
它会生成一个超链接，点击后...`onFocus` 属性表示在元素获得焦点时会发生什么，这里的 `this.blur()` 会让当前元素失去焦点，防止出现选中状态。`<%=path%>` 是一个 JSP 表达式，会被服务器端解析并替换为实际的路径。
var text = document.getElementsByTagName('input'); text[0].onfocus = function () { // 手机注册获得焦点事件 if (this.value === '手机') { this.value = ''; } this.style.color = '#333'; }; text[0].onblur = function () { // 手机注册失去焦点事件 if (this.value === '') { this.value = '手机'; } this.style.color = '#999'; // 失去焦点需要把文本框里面的文字颜色变浅色 }; text[1].onfocus = function () { // 微信注册获得焦点事件 if (this.value === '微信') { this.value = ''; } this.style.color = '#333'; }; text[1].onblur = function () { // 微信注册失去焦点事件 if (this.value === '') { this.value = '微信'; } this.style.color = '#f00'; // 失去焦点需要把文本框里面的文字颜色变为红色 };
05-07
首先，代码通过document.getElementsByTagName('input')获取了所有的input元素，然后分别对第一个和第二个输入框绑定了onfocus和onblur事件处理函数。 第一个输入框在获得焦点时，如果值是“手机”，就清空，并将...
// components/filter-picker/filter-picker.js Component({ properties: { defaultDisplay: { type: String, value: '请选择' }, emptyOption : { label: defaultDisplay, value: '' }, options: Array, value: String, placeholder: String, disabled: Boolean, maxHeight: { type: Number, value: 300 } }, data: { dropdownVisible: false, searchText: '', filteredOptions: [], displayText: '', isActive: false // 新增激活状态 }, methods: { /** * 安全更新筛选后的选项列表 * 1. 确保options是数组 * 2. 过滤掉非对象元素 * 3. 处理label属性缺失的情况 */ updateFilteredOptions() { let { options, searchText } = this.data; // 确保options是数组，如果不是则重置为空数组 if (!Array.isArray(options)) { options = []; this.setData({ options }); } // 过滤掉非对象元素 const validOptions = options.filter(item => item && typeof item === 'object' && 'label' in item ); // 如果没有搜索文本，显示所有有效选项 if (!searchText) { this.setData({ filteredOptions: [emptyOption,...validOptions] }); return; } // 安全过滤：确保item有label属性 const filtered = validOptions.filter(item => { const label = item.label || ''; return label.toString().toLowerCase().includes(searchText.toLowerCase())&&(item.value&&item.value!=''); }); this.setData({ filteredOptions: [emptyOption,...filtered] }); }, /** * 安全更新显示文本 * 1. 处理无效值 * 2. 处理找不到匹配项的情况 */ updateDisplayText() { const { value, options } = this.data; // 确保options是有效数组 if (!Array.isArray(options) || options.length === 0) { this.setData({ displayText: '' }); return; } // 处理空值 if (!value) { this.setData({ displayText: '' }); return; } // 查找匹配项，忽略非对象元素 const selected = options.find(item => item && typeof item === 'object' && item.value === value ); if (selected) { this.setData({ displayText: selected.label || '', searchText: selected.label || '' }); } else { this.setData({ displayText: '' }); } }, /** * 处理输入事件 * @param {Object} e - 事件对象 * @param {string} e.detail.value - 输入框的值 */ onInput(e) { const searchText = e.detail.value; this.setData({ searchText }, () => { this.updateFilteredOptions(); }); }, /** * 当输入框获得焦点时的处理函数 * - 如果组件被禁用则直接返回 * - 设置下拉框可见状态、搜索文本和激活状态 * - 更新过滤后的选项列表 */ onFocus() { if (this.data.disabled) return; this.updateFilteredOptions(); }, /** * 处理输入框失去焦点事件 * 延迟200毫秒后隐藏下拉框并取消激活状态 */ onBlur() { }, /** * 切换下拉框的显示/隐藏状态 * 如果组件被禁用则不做任何操作 * 当下拉框显示时会触发更新过滤选项的操作 */ toggleDropdown() { if (this.data.disabled) return; this.setData({ dropdownVisible: !this.data.dropdownVisible, isActive: !this.data.dropdownVisible }, () => { if (this.data.dropdownVisible) { this.updateFilteredOptions(); } }); }, /** * 处理选择项事件 * @param {Object} e - 事件对象 * @param {Object} e.currentTarget.dataset - 事件目标数据 * @param {string} e.currentTarget.dataset.value - 选中项的值 * @param {Object} e.currentTarget.dataset.item - 选中项对象 * @param {string} e.currentTarget.dataset.item.label - 选中项的显示文本 * @fires change - 触发change事件，传递选中项的值和对象 */ selectItem(e) { const { value, item } = e.currentTarget.dataset; this.setData({ value, displayText: item.label, searchText: item.label, dropdownVisible: false, isActive: false }); this.triggerEvent('change', { value, item }); } }, // 添加值观察器 observers: { 'value': function(newVal) { this.updateDisplayText(); } }, ready() { this.updateFilteredOptions(); this.updateDisplayText(); } });
最新发布
07-31
- 输入框绑定了focus事件（onFocus）、blur事件（onBlur）、input事件（onInput） - 输入框或者整个选择器可能绑定了点击事件（toggleDropdown） 如果点击输入框，会先触发点击事件（toggleDropdown）然后触发...
批量消除超链接虚线框
命由己造，相由心生
05-29 1066
批量消除超链接虚线框 各位想必都知道，onfocus=”this.blur()”这条代码能消除链接时的虚线框，但你有没有想过，如果你的网页上有几个甚至上百个链接，而你又想要去掉上面那些讨厌的虚线框，难道你还一个个去Ctrl+C、Ctrl+V，天哪！这对一个正常人来说绝对是个恶梦。也许你会说，用DW或其它文本编辑器里的“查找/替换”功能就能解决，对！不可否认，这是一个好办法，但作为一个优秀的we
this.blur()
weixin_34162695的博客
03-14 352
<inputonfocus="this.blur();"type="text"style="border:0px;"id="ry_xm"value=""readonly="readonly"/> this.blur():取消聚焦，也就是说，鼠标不能放在该文本框上。 当显示数据的时候不准再修改数据时可以这样用。 转载于:http...
onfocus="this.blur()" 文本框不可点击输入
wzwzwzwzw的专栏
10-15 864
onfocus="this.blur()"
javascript的this.blur()
Lapple的专栏
09-20 2018
[code="html"] [/code] 是一个输入框，用户输入文本的框就是类似于百度的搜索框，大小是20，value=""说明初始为空 onfocuse="this.blur()" onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能...
关于使用onfocus=”this.blur()”的利与弊
weixin_30339969的博客
06-11 601
onfocus=”this.blur()”这句代码有没有觉得眼熟？没错，我们常用它来去除链接取得焦点时外围出现的虚线框（如图一），google一下，前面几十页谈的都是这个去除虚线框的技巧。但我们也许以前从未想过：我们的这行代码给盲人用户们带来了巨大的困扰：这中断了盲人用户的Tab键路径，导致Tab光标无法聚焦页面的下一个控制器（链接、表单域、object、image map等）。测试如下： ...
onFocus="this.blur()"，
热门推荐
04-17 2万+
是一个输入框，用户输入文本的框就是类似于百度的搜索框，大小是20，value=""说明初始为空  onfocuse="this.blur()"  onfocuse是聚焦的意思，当你把光标放在文本框上输入的时候，就是聚焦，但这里添加了"this.blur()"，blur的作用就是去除聚焦，也就是你不能把光标放在这个文本框上，换句话说就是你不能输入文本了  ----------  整个代码构成
html - get the id of onclick(this), onfocus(this) or whatever(this)
BitterCoffee
02-28 366
<html> <head> function myOnclick(x){ var iddddd = x.id;//iddddd -> abcd } </head> <body> <input type="text" id="abcd" onclick="myOnClick(this)"...>...</i
HTML5刷题笔记
weixin_45342302的博客
12-20 1377
定义一个嵌入的对象。onreadystatechange script 每当就绪状态改变时运行的脚本（就绪状态监测媒介数据的状态）。ontimeupdate script 当播放位置改变时（比如当用户快进到媒介中一个不同的位置时）运行的脚本。onseeking script 当 seeking 属性设置为 true（指示定位是活动的）时运行的脚本。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值