텍스트 필드 깜박이는 커서 숨기기

텍스트 필드 깜박이는 커서 숨기기

---

텍스트 필드가 있습니다. 깜박이는 텍스트 커서를 숨기는 방법이 있습니까? 나는 공포 / 미스터리 웹 사이트를하고 있고 단서 중 하나가 어디에서나 타이핑을 시작하는 것이기 때문에 이것을 말한다.

아마도 자바 스크립트로 할 수 있습니까?

---

이 시도:

$(document).ready(
  function() {
    $("textarea").addClass("-real-textarea");
    $(".textarea-wrapper").append("<textarea class=\"hidden\"></textarea>");
    $(".textarea-wrapper textarea.hidden").keyup(
      function() {
        $(".textarea-wrapper textarea.-real-textarea").val($(this).val());
      }
    );
    $(".textarea-wrapper textarea.-real-textarea").focus(
      function() {
        $(this).parent().find("textarea.hidden").focus();
      }
    );
  }
);

.textarea-wrapper {
  position: relative;
}

.textarea-wrapper textarea {
  background-color: white;
}

.textarea-wrapper,
.textarea-wrapper textarea {
  width: 500px;
  height: 500px;
}

.textarea-wrapper textarea.hidden {
  color: white;
  opacity: 0.00;
  filter: alpha(opacity=00);
  position: absolute;
  top: 0px;
  left: 0px;
}

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<div class="textarea-wrapper">
  <textarea></textarea>
</div>

아이디어는 두 번째, 보이지 않는 <textarea>실제 위 / 위 를 만드는 것입니다. 사용자가 보이지 않는 것을 입력하고 있지만 텍스트가 보이지 않기 때문에 (캐럿 / 커서도) 나타나지 않습니다! 그런 다음 JavaScript를 사용하여 해당 값을 보이는 값에 할당합니다.

그러나 IE8에서는 작동하지 않는 것 같습니다. '(불투명도가 11까지 올라가더라도 캐럿은 여전히 ​​보입니다.

하지만 Firefox에서 작동합니다 ...?

---

기본 아이디어는 커서의 색상이 텍스트의 색상과 동일하다는 것입니다. 따라서 가장 먼저 할 일은 텍스트를 투명하게 만들어 커서를 함께 가져가는 것입니다. 그런 다음 텍스트 그림자를 사용하여 텍스트를 다시 표시 할 수 있습니다.

이 링크를 사용하여 jsfiddle 에서 라이브를 확인하십시오 .

input[type="text"]{
    color : transparent;
    text-shadow : 0 0 0 #000;
}
input[type="text"]:focus{
    outline : none;
}

최신 정보:

iOS 8 및 IE 11 에서 작동하지 않는 것으로 알려짐

---

나의 또 다른 아이디어는 좀 더 해키하고 자바 스크립트가 필요합니다.

HTML 및 CSS 부분 :

2 개의 입력 필드를 만들고 z- 인덱스 등을 사용하여 정확히 다른 필드 위에 정확히 배치합니다. 그런 다음 맨 위 입력 필드를 완전히 투명하게 만들고 초점을 맞추지 않고 색상도 동일하게 만듭니다. 위의 입력 내용 만 표시하지만 실제로는 작동하지 않도록 표시되는 하위 입력을 비활성화로 설정해야합니다.

자바 스크립트 부분 :

위의 모든 작업 후에 두 입력을 동기화합니다. 키를 누르거나 변경할 때 더 높은 입력의 내용을 더 낮은 것으로 복사합니다.

위의 모든 것을 요약하면 보이지 않는 입력을 입력하면 양식이 제출 될 때 백엔드로 전송되지만 그 안의 모든 텍스트 업데이트는 표시되지만 비활성화 된 입력 필드에는 표시되지 않습니다.

---

caret-color: transparent !important; 최신 브라우저에서 작동

---

달력 선택기 상단에서 커서가 깜박이는 것을 볼 수 있었기 때문에 달력을 트리거하는 날짜 입력을 위해 iOS 장치에서 깜박이는 커서를 숨기는 방법을 찾고있었습니다.

input:focus { text-indent: -9999em; }

따라서이 경우 내 CSS는 잘 작동합니다. 분명히 단점은 입력중인 내용을 확인해야하는 경우 좋지 않다는 것입니다.

---

나는 이것이 완벽한 해결책이라고 생각합니다. 입력을 충분히 넓게 만들고 오른쪽 화면에 정렬하여 커서와 콘텐츠를 화면 외부에 배치하면서 여전히 클릭 할 수 있도록합니다.

---

불행히도 CSS로 텍스트 커서의 스타일을 지정할 수 없습니다. 아주 나쁜 JavaScript 트릭 만 할 수 있지만 웹 사이트의 레이아웃과 요구 사항에 따라 전혀 불가능할 수도 있습니다. 그래서 나는 전체 아이디어를 잊는 것이 좋습니다.

---

<input style="position: fixed; top: -1000px">

iOS8에서 작동합니다.

---

function noCursor(a){
  var a = document.getElementById(a),
      b = document.createElement('input');
  b.setAttribute("style","position: absolute; right: 101%;");
  a.parentNode.insertBefore(b, a);

  if(a.addEventListener){
    b.addEventListener("input",function(){a.value = b.value});
    a.addEventListener("focus",function(){b.focus()});
  }else{
    a.attachEvent("onfocus",function(){b.focus()});
    b.attachEvent("onpropertychange",function(){a.value = b.value});
  };
 
}

noCursor('inp');

<input id="inp">

커서를 원하지 않는 각 요소에 대한 기능을 사용할 수 있습니다.

---

@sinfere의 아이디어를 사용하여 내 친구의 개념 증명을 만들었습니다.

데모 : http://jsfiddle.net/jkrielaars/y64wjuhj/4/

입력의 시작은 오프셋이므로 컨테이너 외부로 떨어집니다 (오버플로가 숨겨져 있음). 실제 caracters (및 깜박이는 커서)는 결코보기에 들어 가지 않습니다. 가짜 div는 입력 필드 아래에 배치되므로 가짜 div를 탭하면 보이지 않는 입력에 초점이 맞춰집니다.

<div class="container">
    <div id="fake" class="fake">
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
        <span class='star empty'></span>
    </div>
    <input type="text" id="password" class="invisible" maxlength="4">
</div>

---

초점 이벤트에서 흐림 기능을 호출하여 "텍스트 필드 깜박이는 커서 숨기기"를 수행 할 수 있습니다.

<input type="text" onfocus="this.blur()"/>

참조 URL : https://stackoverflow.com/questions/3671141/hide-textfield-blinking-cursor