如何实现隐藏input的光标

在开发的过程中会遇到各种各样的奇葩需求,比如输入框输入的时候不要显示光标。不得不说这个需求的应用场景太少了,但是既然提出来了就得找方法去解决,在多番尝试之后最终发现,像网上说的什么设置input readonly、disabled、οnfοcus=”this.blur()”等等方法,都没达到效果。我的input框是需要输入的,只是隐藏光标,并非不可用啊。后来在自己脑门大开的时候发现可以通过以下代码实现光标的隐藏。

<style>
input{
color:transparent;
}
</style>
<input  value="我要隐藏光标">

如果现在你还想改变字体颜色的话,需要用到text-shadow属性

<style>
input{
color:transparent;
text-shadow:0 0 0 red;
}
</style>

这样就可以实现隐藏光标,并且可以继续输入。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
作为Microsoft 32位平台的应用程序编程接口,Win32 API是从事Windows应用程序开发所必备的。本书首先对Win32 API函数做完整的概述;然后收录五大类函数:窗口管理、图形设备接口、系统服务、国际特性以及网络服务;在附录部分,讲解如何在Visual Basic和Delphi中对其调用。 本书是从事Windows应用程序开发的软件工程师的必备参考手册。 Win32 API作为 Microsoft 32位平台(包括:Windows 9x,Windows NT3.1/4.0/5.0,WindowsCE)的应用程序编程接口,它是构筑所有32位Windows平台的基石,所有在Windows平台上运行的应用程序都可以调用这些函数。 从事Windows应用程序开发,离不开对Win32 API函数的调用。只有充分理解和利用API函数,才能深入到Windows的内部,充分挖掘系统提供的强大功能和灵活性。 近年来,随着Microsoft 32位平台的版本升级, Win32 API函数的构成、功能与调用方式都有很大的发展变化,然而,国内很少有相关的新版资料出版。为了满足广大开发人员的迫切需求,我们经过认真收集、整理素材,组织编写了这本与各种Microsoft 32位平台最新版本同步的Win32 API参考手册。 全书收录了五大类函数:窗口管理、图形设备接口、系统服务、国际特性以及网络服务。所有函数均附有功能说明、参数说明、返回值说明、备注以及引用说明。另外,在本书的第一章,我们对WiN32 API函数作了完整的概述;在附录部分,讲解了如何在Visual Basic和Delphi中对其调用。 由于篇幅较大,涉及技术内容广泛,加之时间仓促,书中难免存在不少错误或疏漏,希望广大读者给与批评指正。 在Windows程序设计领域处于发展初期时,Windows程序员可使用的编程工具唯有API函数。这些函数在程序员手中犹如"积木块"一样,可搭建出各种界面丰富、功能灵活的应用程序。不过,由于这些函数结构复杂,所以往往难以理解,而且容易误用。 随着软件技术的不断发展,在Windows平台上出现了很多优秀的可视化编程环境,程序员可以采用"所见即所得"的编程方式来开发具有精美用户界面和功能的应用程序。这些可视化编程环境操作简便、界面友好,比如:Visual C++,Delphi,Visual Basic等等。在这些工具中提供了大量的类库和各种控件,它们替代了API的神秘功能。事实上,这些类库和控件都是构筑在Windows API的基础上的,但它们使用方便,加速了Windows应用程序的开发,所以受到程序员的普遍采用。有了这些类库和控件,程序员们便可以把主要精力放在整体功能的设计上,而不必过于关注具体细节。不过,这也导致了非常多的程序员在类库面前"固步自封",对下层API函数的强大功能一无所知。 实际上。程序员要想开发出更灵活、更实用、更具效率的应用程序,必然要涉及到直接使用API函数。虽然类库和控件使应用程序的开发容易得多,但它们只提供Microsoft Windows的一般功能,对于一些比较复杂和特殊的功能来说,单使用类库和控件是难以实现的,必须直接使用API函数来编写。API函数是构筑整个Windows框架的基石,只有充分理解和利用API函数,才能深入到Windows的内部,充分发挥各种32位平台的强大功能和灵活性,才能成功地扩展和突破类库、控件和可视开发环境的限制。 Win32 API即为Microsoft 32位平台的应用程序编程接口(Application Programming Interface)。所有在Win32平台上运行的应用程序都可以调用这些函数。 使用Win32 API,应用程序可以充分挖掘Windows的32位操作系统的潜力。 Mircrosoft的所有32位平台都支持统一的API,包括函数、结构、消息、宏及接口。使用 Win32 API不但可以开发出在各种平台上都能成功运行的应用程序,而且也可以充分利用每个平台特有的功能和属性。 在具体编程时,程序实现方式的差异依赖于相应平台的底层功能的不同。最显著的差异是某些函数只能在更强大的平台上实现其功能。例如,安全函数只能在Windows NT操作系统下使用。另外一些主要差别就是系统限制,比如值的范围约束,或函数可管理的项目个数等等。 标准Win32 API函数可以分为以下几类: 窗口管理 窗口通用控制 Shell特性 图形设备接口 系统服务 国际特性 网络服务 在下面各节中,我们分别介绍这7种类型的API函数。 窗口管理函数向应用程序提供了一些创建和管理用户界面的方法。你可以使用窗口管理函数创建和使用窗口来显示输出、提示用户进行输入以及
对dhtmlXTree进行一个小的扩展 需求1: 动态生成树形菜单,每个节点都有各自的URL地址,单击不同的节点框架页的右侧跳转到该节点所对应的URL。(框架页说明:左边是树形菜单;右边是显示页面相应信息的页面) 分析: dhtmlXTree提供了很好的添加,删除节点的方法,故选择dhtmlXTree。 但是dhtmlXTree不能满足"每个节点都有各自的URL地址,单击不同的节点框架页的右侧跳转到该节点所对应的URL"这点需求,因次想到了对dhtmlXTree进行一个小的扩展,即在其节点对象原有属性的基础上,再添加两个扩展属性。具体操作如下: 1、找到定义节点对象的那个函数(或方法) function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode) 修改为 function dhtmlXTreeItemObject(itemId,itemText,parentObject,treeObject,actionHandler,mode,url,target) 并在方法体中添加赋值语句:this.itemURL=url;this.itemTarget=target; 2、然后修改所有与dhtmlXTreeItemObject有关(直接或者间接相关)的方法: _attachChildNode,insertNewItem,insertNewChild,insertNewNext,_recreateBranch,_parseXMLTree 注:_parseXMLTree方法是与loadXML,loadXMLString相关的。 在这些方法中生成节点的语句中添加相应的参数和语句,以支持新添加的属性itemURL,itemTarget。 需求2: 为dhtmlXTree树上的每一个节点添加右键菜单。附:在树上的节点上点右键时才会生成菜单,空白区域单击时不会生成菜单。 分析: 1、用 dhtmlXTree + dhtmlxmenu 实现。 2、 用dhtmlxmenu生成菜单的部分代码: var menu = new dhtmlXMenuObject(); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone("treeboxbox_tree"); menu.addContextZone方法是为了把菜单添加到指定区域。 3、dhtmlXTreeObject.prototype._createItem方法是构造树形菜单上元素的具体实现方法。看这个方法的具体操作,可以发现它为每一个节点构建了一个table,节点的内容(即名字)放置在一个span中。 4、考虑到dhtmlxmenu实在指定的区域构建菜单,所以可以为dhtmlXTree树上的每一个节点添加右键事件,在这个右键事件里获得该节点对象所对应的区域,然后在这个区域内构建Menu菜单。 难点和解决方案: 1、怎样获得dhtmlXTree树上的每一个节点对象所对应的区域?(dhtmlXTreeObject.prototype._createItem方法没有为这个节点的span设置id) 解决方法: 在dhtmlXTreeObject.prototype._createItem方法中添加一个为span设置id的语句: 即: 在itemObject.span=document.createElement('span'); itemObject.span.className="standartTreeRow"; 后,新添加一句 itemObject.span.id="treeNode_"+itemObject.id;//为这个span新增一个Id属性 2、为dhtmlXTree树上的每一个节点添加右键事件,在这个右键事件里获得该节点对象所对应的区域,然后在这个区域内构建Menu菜单。 解决方法: a、为dhtmlXTree树上的每一个节点添加右键事件: tree.setOnRightClickHandler(treeOnRegihtClick);//右键事件 b、构建Menu菜单: var menu = new dhtmlXMenuObject(); function treeOnRegihtClick(id){ alert("右键 "+" span.id:"+tree.getItem(id).span.id); menu.setImagePath("imgs/"); menu.setIconsPath("images/"); menu.renderAsContextMenu(); menu.loadXML("dhtmlxmenu.xml?e="+new Date().getTime()); menu.addContextZone(tree.getItem(id).span.id);alert("width:"+tree.getItem(id).span.clientWidth); //var X=tree.getItem(id).span.getBoundingClientRect().left; //var Y=tree.getItem(id).span.getBoundingClientRect().top; var X=document.getElementById('mouseXPosition').value;//获得鼠标的横坐标位置 var Y=document.getElementById('mouseYPosition').value;//获得鼠标的纵坐标位置 menu.showContextMenu(X,Y);//调用showContextMenu方法显示菜单 说明:如果这儿不加上这条语句的话,第一次点击右键时只能生成菜单,但是显示不出菜单,下次点击右键Menu菜单才能弹出。 //menu._showContextMenu(X,Y,tree.getItem(id).span.id); } c、用 javascript 获取当页面上鼠标(光标)位置 <script type="text/javascript"> // 说明:获取鼠标位置 function mousePosition(ev){ if(ev.pageX || ev.pageY){ return {x:ev.pageX, y:ev.pageY}; } return { x:ev.clientX + document.body.scrollLeft - document.body.clientLeft, y:ev.clientY + document.body.scrollTop - document.body.clientTop }; } document.onmousemove = mouseMove; function mouseMove(ev){ ev = ev || window.event; var mousePos = mousePosition(ev); document.getElementById('mouseXPosition').value = mousePos.x; document.getElementById('mouseYPosition').value = mousePos.y; } </script> 页面上放置两个隐藏域存放鼠标的位置:<input type="hidden" id=mouseXPosition><input type="hidden" id=mouseYPosition>
隐藏input光标有多种方法。一种方法是通过设置input的color属性为透明来隐藏光标。例如,可以使用以下代码实现光标隐藏: ```html <style> input { color: transparent; } </style> <input value="我要隐藏光标"> ``` 这样设置后,光标将不可见,但输入框仍然可以使用。\[1\] 另一种方法是通过设置input的color属性为透明,并使用text-shadow属性将文字显示出来。这样可以同时隐藏光标和显示输入的文字。例如,可以使用以下代码实现: ```html <style> input { color: transparent; text-shadow: 0 0 0 #000; } </style> <input value="我要隐藏光标"> ``` 这样设置后,光标将不可见,但输入的文字将以黑色显示。\[2\] 需要注意的是,在网上搜索的其他方法,如使用div模拟、设置readonly、设置disabled、设置自动blur等等方式,可能无法满足隐藏光标的需求。因此,以上两种方法是比较常用且有效的方法来隐藏input光标。\[3\] #### 引用[.reference_title] - *1* [如何实现隐藏input光标](https://blog.csdn.net/u010730897/article/details/72721960)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] - *2* *3* [教你如何使用css隐藏input光标](https://blog.csdn.net/weixin_33985507/article/details/88924181)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^koosearch_v1,239^v3^insert_chatgpt"}} ] [.reference_item] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值