입력 텍스트에서 깜박이는 커서를 숨기는 방법?

입력 텍스트에서 깜박이는 커서를 숨기는 방법?

선택 입력처럼 보이지만 실제로는 그렇지 않은 것을 만들고 싶습니다. 여기 단계가 있습니다.

저는.<input type="text">.

추가했습니다.background-image, 선택 상자라는 인상을 주는 "선택 화살표"를 보여줍니다.

이 입력에 기본값을 추가했습니다.

숨겨진 디브가 있을 것입니다.SlideDown()클릭하면 바로 아래 입력됩니다.

값을 변경할 수 없도록 읽기 전용을 시도했지만 깜박이는 커서가 나타납니다.

사용하면disabled, 깜박이는 커서는 나타나지 않지만,.click()아니면.focusjQuery의 함수가 작동하지 않습니다.드롭다운 메뉴가 그렇지 않습니다.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');
}

이 내용을 "입력 선택" 클래스에 추가하면 됩니다.

caret-color: transparent;

커서의 색은 텍스트의 색과 일치합니다.

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

입력란에 실제로 텍스트를 표시하려면(필요한 사람이 있습니다) 텍스트 그림자를 사용할 수 있습니다.

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

(Firefox 및 Safari 테스트 완료).

커서를 없애기 위해 블러를 사용했을 뿐입니다.

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

이것이 완벽한 해결책이라고 생각합니다. 입력을 충분히 넓게 하고 화면 오른쪽으로 정렬하여 커서와 콘텐츠를 화면 밖에 두고 클릭할 수 있습니다.

나에게 효과가 있었던 이 코드를 시도해보세요 :-

<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;
    }

드디어 묘책을 찾았습니다.

<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;
}

내 상황에선 효과가 있어요!

이거 먹어봐요.

input {
  color: transparent;
  text-shadow: 0 0 0 #2196f3;

  &:focus {
      outline: none;
  }
}

완전한 응답은 아니지만 도움이 될 수 있습니다. 최근 프로젝트에서 입력을 비활성화하는 데 사용했습니다.

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

사용자는 입력을 클릭하면 해당 입력에 초점을 맞추게 되고, 블러() 기능을 통해 초점이 제거됩니다.readOnly를 "True"로 설정하고 배경색을 회색(#e6e6e6)으로 설정하면 사용자가 혼동하지 않아야 합니다.

언급URL : https://stackoverflow.com/questions/9333044/how-to-hide-blinking-cursor-in-input-text