Programing

입력 텍스트 내에서 명확한 아이콘

알 수 없는 사용자 2020. 5. 30. 09:07
반응형

입력 텍스트 내에서 명확한 아이콘

Google 검색 창과 같은 입력 요소 자체를 지우려면 오른쪽에 아이콘이있는 입력 텍스트 요소를 만드는 빠른 방법이 있습니까?

주변을 둘러 보았지만 입력 요소의 배경으로 아이콘을 넣는 방법 만 찾았습니다. jQuery 플러그인이나 다른 것이 있습니까?

입력 텍스트 요소 안에 아이콘을 원합니다.

--------------------------------------------------
|                                               X|
--------------------------------------------------

type="search"입력 값에 a 를 추가 하십시오
. 지원은 꽤 괜찮지 만 IE <10에서는 작동하지 않습니다.

<input type="search">

기존 브라우저를위한 명확한 입력

IE9 지원 이 필요한 경우 몇 가지 해결 방법이 있습니다.

표준 <input type="text">및 일부 HTML 요소 사용 :

/**
 * Clearable text inputs
 */
$(".clearable").each(function() {
  
  var $inp = $(this).find("input:text"),
      $cle = $(this).find(".clearable__clear");

  $inp.on("input", function(){
    $cle.toggle(!!this.value);
  });
  
  $cle.on("touchstart click", function(e) {
    e.preventDefault();
    $inp.val("").trigger("input");
  });
  
});
/* Clearable text inputs */
.clearable{
  position: relative;
  display: inline-block;
}
.clearable input[type=text]{
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
}
.clearable__clear{
  display: none;
  position: absolute;
  right:0; top:0;
  padding: 0 8px;
  font-style: normal;
  font-size: 1.2em;
  user-select: none;
  cursor: pointer;
}
.clearable input::-ms-clear {  /* Remove IE default X */
  display: none;
}
<span class="clearable">
  <input type="text" name="" value="" placeholder="">
  <i class="clearable__clear">&times;</i>
</span>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input class="clearable" type="text">(추가 요소 없음) 만 사용

입력 요소 내부의 명확한 아이콘

a를 설정하고 class="clearable"배경 이미지로 재생하십시오.

/**
 * Clearable text inputs
 */
function tog(v){return v?'addClass':'removeClass';} 
$(document).on('input', '.clearable', function(){
    $(this)[tog(this.value)]('x');
}).on('mousemove', '.x', function( e ){
    $(this)[tog(this.offsetWidth-18 < e.clientX-this.getBoundingClientRect().left)]('onX');
}).on('touchstart click', '.onX', function( ev ){
    ev.preventDefault();
    $(this).removeClass('x onX').val('').change();
});

// $('.clearable').trigger("input");
// Uncomment the line above if you pre-fill values from LS or server
/* Clearable text inputs */
.clearable{
  background: #fff url(http://i.stack.imgur.com/mJotv.gif) no-repeat right -10px center;
  border: 1px solid #999;
  padding: 3px 18px 3px 4px;     /* Use the same right padding (18) in jQ! */
  border-radius: 3px;
  transition: background 0.4s;
}
.clearable.x  { background-position: right 5px center; } /* (jQ) Show icon */
.clearable.onX{ cursor: pointer; }              /* (jQ) hover cursor style */
.clearable::-ms-clear {display: none; width:0; height:0;} /* Remove IE default X */
<input class="clearable" type="text" name="" value="" placeholder="" />


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

jsBin 데모

트릭은 올바른 패딩 (18px을 사용)을 설정 input하고 배경 이미지를 눈에 띄지 않게 밀어 넣는 것입니다 (I used right -10px center).
18px 패딩은 텍스트가 아이콘 아래에 보이지 않도록합니다 (표시되는 동안).
jQ는 명확한 아이콘을 보여주는 클래스 x( input값이있는 경우)를 추가 합니다.
이제 우리가 필요로하는 것은 클래스로 입력을 jQ로 대상 지정 하고 마우스가 18px "x"영역 안에 있는지를 x감지하는 것 mousemove입니다. 내부에 클래스를 추가하십시오 onX. 클래스를
클릭하면 onX모든 클래스가 제거되고 입력 값이 재설정되고 아이콘이 숨겨집니다.

7x7px gif : 명확한 아이콘 7x7

Base64 문자열 :

data:image/gif;base64,R0lGODlhBwAHAIAAAP///5KSkiH5BAAAAAAALAAAAAAHAAcAAAIMTICmsGrIXnLxuDMLADs=

이것이 html 5 호환 브라우저로 제한되어 있으면 다음을 사용하여 제안 할 수 있습니다.

<input type="search" />

JS 피들 데모

분명히 Chromium (Ubuntu 11.04)에서는 일반 텍스트 이미지 / 기능이 나타나기 전에input 요소 내부에 텍스트가 있어야합니다 .

참고:

이미지 스타일의 재설정 버튼을 사용할 수 있습니다 ...

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

여기에서 실제로보십시오 : http://jsbin.com/uloli3/63

CSS로 명확한 텍스트 상자를 만들었습니다. 작동시키기 위해 자바 스크립트 코드가 필요하지 않습니다

아래는 데모 링크입니다

http://codepen.io/shidhincr/pen/ICLBD

MDN에 따르면 , <input type="search" />현재 모든 최신 브라우저에서 지원됩니다 :

입력 유형 = 검색

<input type="search" value="Clear this." />

그러나 브라우저에서 일관된 다른 동작을 원한다면 JavaScript 만 필요한 간단한 대안이 있습니다.

옵션 1-항상 'x'를 표시하십시오 (예 : 여기).

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input > [data-clear-input] {
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
<p>Always display the 'x':</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

옵션 2-필드 위로 마우스를 가져 가면 'x'만 표시 : (예 : 여기)

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input>[data-clear-input]'), function(el) {
  el.addEventListener('click', function(e) {
    e.target.previousElementSibling.value = '';
  });
});
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input:hover > [data-clear-input] {
  display: block;
}
.clearable-input > [data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
<p>Only display the 'x' when hovering over the field:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

옵션 3- input요소에 값이있는 경우에만 'x'를 표시하십시오 (예 : 여기).

Array.prototype.forEach.call(document.querySelectorAll('.clearable-input'), function(el) {
  var input = el.querySelector('input');

  conditionallyHideClearIcon();
  input.addEventListener('input', conditionallyHideClearIcon);
  el.querySelector('[data-clear-input]').addEventListener('click', function(e) {
    input.value = '';
    conditionallyHideClearIcon();
  });

  function conditionallyHideClearIcon(e) {
    var target = (e && e.target) || input;
    target.nextElementSibling.style.display = target.value ? 'block' : 'none';
  }
});
.clearable-input {
  position: relative;
  display: inline-block;
}
.clearable-input > input {
  padding-right: 1.4em;
}
.clearable-input >[data-clear-input] {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  font-weight: bold;
  font-size: 1.4em;
  padding: 0 0.2em;
  line-height: 1em;
  cursor: pointer;
}
.clearable-input > input::-ms-clear {
  display: none;
}
<p>Only display the 'x' if the `input` element has a value:</p>

<div class="clearable-input">
  <input type="text" />
  <span data-clear-input>&times;</span>
</div>

<div class="clearable-input">
  <input type="text" value="Clear this." />
  <span data-clear-input>&times;</span>
</div>

주위를 비행하는 솔루션이 실제로 우리의 요구 사항을 충족 시키지 못했기 때문에 jQuery-ClearSearch 라는 간단한 jQuery 플러그인을 만들었습니다 .

그것을 사용하는 것은 쉽습니다 :

<input class="clearable" type="text" placeholder="search">

<script type="text/javascript">
    $('.clearable').clearSearch();
</script>

예 : http://jsfiddle.net/wldaunfr/FERw3/

편집 : 이 링크를 찾았습니다. 도움이 되길 바랍니다. http://viralpatel.net/blogs/2011/02/clearable-textbox-jquery.html

입력 텍스트 오른쪽에 원하는 것을 언급했습니다. 따라서 가장 좋은 방법은 입력 상자 옆에 이미지를 만드는 것입니다. 상자 내부를보고있는 경우 배경 이미지를 사용할 수 있지만 상자를 지우는 스크립트를 작성하지 못할 수 있습니다.

따라서 텍스트 상자를 지우려면 JavaScript 코드를 삽입하고 이미지화하고 작성하십시오.

구글처럼 원한다면, "X"는 실제로 안에 있지 않다는 것을 알아야합니다. <input>그것들은 텍스트 상자처럼 보이도록 외부 컨테이너와 함께 나란히 있습니다.

HTML :

<form>
    <span class="x-input">
        <input type="text" class="x-input-text" />
        <input type="reset" />
    </span>
</form>

CSS :

.x-input {
    border: 1px solid #ccc;
}

.x-input input.x-input-text {
    border: 0;
    outline: 0;
}

예 : http://jsfiddle.net/VTvNX/

이 같은?? JSfiddle 데모

    <!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
    .searchinput{
    display:inline-block;vertical-align: bottom;
    width:30%;padding: 5px;padding-right:27px;border:1px solid #ccc;
        outline: none;
}
        .clearspace{width: 20px;display: inline-block;margin-left:-25px;
}
.clear {
    width: 20px;
    transition: max-width 0.3s;overflow: hidden;float: right;
    display: block;max-width: 0px;
}

.show {
    cursor: pointer;width: 20px;max-width:20px;
}
form{white-space: nowrap;}

    </style>
</head>
<body>
<form>
<input type="text" class="searchinput">
</form>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script> <script>
$(document).ready(function() {
$("input.searchinput").after('<span class="clearspace"><i class="clear" title="clear">&cross;</i></span>');
$("input.searchinput").on('keyup input',function(){
if ($(this).val()) {$(".clear").addClass("show");} else {$(".clear").removeClass("show");}
});
$('.clear').click(function(){
    $('input.searchinput').val('').focus();
    $(".clear").removeClass("show");
});
});
</script>
</body>
</html>

<form action="" method="get">
   <input type="text" name="search" required="required" placeholder="type here" />
   <input type="reset" value="" alt="clear" />
</form>

<style>
   input[type="text"]
   {
      height: 38px;
      font-size: 15pt;
   }

   input[type="text"]:invalid + input[type="reset"]{
     display: none;
   } 

   input[type="reset"]
   {
      background-image: url( http://png-5.findicons.com/files/icons/1150/tango/32/edit_clear.png );
      background-position: center center;
      background-repeat: no-repeat;
      height: 38px;
      width: 38px;
      border: none;
      background-color: transparent;
      cursor: pointer;
      position: relative;
      top: -9px;
      left: -44px;
   }
</style>

다음은 jQuery 플러그인과 마지막 데모입니다.

http://jsfiddle.net/e4qhW/3/

나는 주로 예 (그리고 개인적인 도전)를 설명하기 위해했습니다. 공감대는 환영하지만 다른 답변은 제 시간에 잘 전달되며 적절한 인정을받을 가치가 있습니다.

여전히 제 생각에는 UI 라이브러리의 일부가 아닌 이상 과도하게 설계된 팽창입니다.

jQuery와 부트 스트랩을 사용하여 간단한 구성 요소를 작성했습니다. 시도해보십시오 : https://github.com/mahpour/bootstrap-input-clear-button

jquery 플러그인을 사용하여 사용자 정의 옵션을 추가하고 새 플러그인을 만드는 데 필요에 맞게 조정했습니다. https://github.com/david-dlc-cerezo/jquery-clearField에서 찾을 수 있습니다.

간단한 사용법의 예 :

<script src='http://code.jquery.com/jquery-1.9.1.js'></script>
<script src='http://code.jquery.com/ui/1.10.3/jquery-ui.js'></script>
<script src='src/jquery.clearField.js'></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="css/jquery.clearField.css">

<table>
    <tr>
        <td><input name="test1" id="test1" clas="test" type='text'></td>
        <td>Empty</td>
    </tr>
    <tr>
        <td><input name="test2" id="test2" clas="test" type='text' value='abc'></td>
        <td>Not empty</td>
    </tr>
</table>

<script>
    $('.test').clearField();
</script>

이와 같은 것을 얻기 :

여기에 이미지 설명을 입력하십시오

jQuery Mobile에는 다음과 같은 기능이 내장되어 있습니다.

<input type="text" name="clear" id="clear-demo" value="" data-clear-btn="true">

jquery 모바일 API 텍스트 입력 문서

부트 스트랩없이이 명령으로 수행 할 수 있습니다.

div {
  position: relative;
}

input {
  background:none;
  outline:none;
  display: inline-block;
  
  width: 100%;
  margin: 8px 0;
  padding: 13px 15px;
  padding-right: 42.5px;
  border: 1px solid teal;
  border-radius: 5px;
  box-sizing: border-box;
}

span {
  position: absolute;
  top: 0;
  right: 0;
  margin: 8px 0;
  padding: 13px 15px;
  
  color: teal;
  font-weight: bold;
  cursor: pointer;
}
<div>
  <input placeholder="Prueba" />
  <span>&#x2716;</span>
</div>

CSS 또는 이미지 파일을 포함 할 필요가 없습니다. 대포 jQuery UI 라이브러리 전체를 포함 할 필요가 없습니다. 나는 당신을 위해 마술을하는 가벼운 jQuery 플러그인을 작성했습니다. 당신이 필요하다 jQuery및 플러그인 . =)

jQuery InputSearch 몰래 엿보기

여기에서 바이올린 : jQuery InputSearch demo .

참고 URL : https://stackoverflow.com/questions/6258521/clear-icon-inside-input-text

반응형

'Programing' 카테고리의 다른 글

.NET HttpClient.  (0) 2020.05.30
폴더가없는 경우 Bash를 사용하여 폴더를 만드는 방법은 무엇입니까?  (0) 2020.05.30
지원 라이브러리를 사용하여 리플 애니메이션을 얻는 방법은 무엇입니까?  (0) 2020.05.30
가장 좋아하는 (G) Vim 플러그인 / 스크립트?  (0) 2020.05.30
실행 가능한 jar에 사용할 기본 클래스를 Spring Boot에 알리려면 어떻게합니까?  (0) 2020.05.30

'Programing'의 다른글

  • 현재글입력 텍스트 내에서 명확한 아이콘

관련글

댓글

티스토리툴바