jquery 如何在输入文本中隐藏闪烁光标？

nwo49xxi 于 2022-11-22 发布在 jQuery

关注(0)|答案(7)|浏览(210)

我想做一些看起来像选择输入但实际上不是的东西，下面是步骤。
我做了一个 <input type="text"> 。
我添加了一个 background-image ，它将显示一个 " 选择箭头 " ，给人一种它是一个选择框的印象。
我向此输入添加了一个默认值。
当我点击它的时候，会有一个隐藏的 div ，它会在这个输入的正下方。
我尝试了只读的东西，使值不能改变，但闪烁的光标将显示出来。
如果我使用 disabled ，闪烁的光标将不会出现，但是 jQuery 中的 .click() 或 .focus 函数将不起作用。下拉菜单将不会显示 SlideDown() 。
如何使其可单击，同时不显示闪烁的光标？
这是密码

<div style="padding-top:17px; overflow:hidden;">
    <div style="float:left;">
        <label for="secretquestion">Secret Question</label><br>
        <input type="text" class="inputselect" id="secretquestion" name="secretquestion" value="Choose a Secret Question" tabindex=10 /><br>
        <div class="selectoptions" id="secretquestionoptions">
            <b>test</b>
        </div> 
    </div>
</div>

中的每一个
CSS 系统

.selectoptions
{
    display: none;
    background-color: white;  
    color: rgb(46,97,158); 
    width: 250px; 
    margin:auto; 
    border-style: solid; 
    border-width:1px; 
    border-color: rgb(46,97,158);  
    font-size: 14px; 
    text-align: center; 
}

.inputselect {
    color: white;  
    cursor: pointer;  
    background-image: url('inputselect.png');
    padding-top: 5px; 
    padding-bottom: 5px;   
    padding-left:10px; 
    padding-right:-10px;
    width:240px; 
    border-style: solid; 
    border-color: rgb(46,97,158); 
    border-width: 1px;
} 
.inputselect:hover {
    outline:none;      
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png');
}
.inputselect:focus {
    outline:none;      
    color:aqua; 
    cursor: pointer; 
    background-image: url('inputselecthover.png');
}

格式

jquery

来源：https://stackoverflow.com/questions/9333044/how-to-hide-blinking-cursor-in-input-text

7条答案

按热度按时间

fnx2tebb1#

只需将以下代码添加到“inputselect”类：

caret-color: transparent;

赞(0）回复(0）举报 2022-11-22

q1qsirdb2#

光标的颜色与文本的颜色相匹配。

<input type="text" style="color: transparent">

中的每一个
如果你真的想在输入框中显示文本（我的，有些人是有需要的），你可以使用文本阴影。

<style>
    body, div, input {
       color: #afa;
       text-shadow: 0px 0px 1px #fff;
    }
<style>

格式
（已测试 Firefox 和 Safari ）。

赞(0）回复(0）举报 2022-11-22

06odsfpq3#

我只是用了一个模糊来摆脱光标。

$('input').mousedown(function(e){
  e.preventDefault();
  $(this).blur();
  return false;
});

赞(0）回复(0）举报 2022-11-22

cu6pst1q4#

我认为这是一个完美的解决方案：使输入足够宽，右对齐屏幕右，从而使光标和内容位于屏幕外部，而它仍然是可点击的

赞(0）回复(0）举报 2022-11-22

d8tt03nd5#

我终于找到了一个妙计。

<div class="wrapper">
    <input type="text" />
</div>

.wrappr {
    width: 100px;
    height: 30px;
    overflow: hidden;
}
.wrapper input {
    width: 120px;
    height: 30px;
    margin-left: -20px;
    text-align: left;
}

而且在我的座位上，它起作用了！

赞(0）回复(0）举报 2022-11-22

yrdbyhpb6#

这可能会有帮助（虽然不是完整的回复）-我在最近的一个项目中用它来禁用输入：

document.getElementById('Object').readOnly = true;
    document.getElementById('Object').style.backgroundColor = '#e6e6e6';
    document.getElementById('Object').onfocus = function(){
        document.getElementById('Object').blur();
    };

当用户点击输入时，焦点会聚焦在输入上，blur（）函数会移除焦点。在这两者之间，将readOnly设置为“True”和将背景颜色设置为灰色（#e6e6e6），用户应该不会感到困惑。

赞(0）回复(0）举报 2022-11-22

vsdwdz237#

试试这个代码，它对我工作：-

<div class="input-parent" style="margin-left: 30px;">
     <input type="text" />
</div>

input-parent {
    width: 100px;
    height: 30px;
    overflow: hidden;
    }
.input-parent input {
    width: 120px;
    height: 30px;
    margin-left: -20px;
    text-align: left;
    caret-color: transparent;
    }

赞(0）回复(0）举报 2022-11-22

我来回答

jquery 如何在输入文本中隐藏闪烁光标？

7条答案

相关问题

热门标签

最新问答