부트 스트랩 3에서 'x'가있는 검색 상자를 지우려면 어떻게합니까?


93

부트 스트랩에 문제가 있으므로 도움이 될 것입니다. 감사

내가 원하는 것 :( 상단 부분)

여기에 이미지 설명 입력

내 현재 코드 :

<div class="form-group">
    <input type="text" 
           class="form-control" 
           id="findJobTitle" 
           name="findJobTitle" 
           placeholder="Job Title, Keywords" 
           onkeyup="showResult()"> 
</div>

현재 스크린 샷 :

여기에 이미지 설명 입력

답변:


208

이와 같은 것을 얻으려면

클리어 버튼으로 입력

Bootstrap 3 및 Jquery에서는 다음 HTML 코드를 사용합니다.

<div class="btn-group">
  <input id="searchinput" type="search" class="form-control">
  <span id="searchclear" class="glyphicon glyphicon-remove-circle"></span>
</div>

및 일부 CSS :

#searchinput {
    width: 200px;
}
#searchclear {
    position: absolute;
    right: 5px;
    top: 0;
    bottom: 0;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #ccc;
}

및 자바 스크립트 :

$("#searchclear").click(function(){
    $("#searchinput").val('');
});

물론 필요한 기능에 대해 더 많은 자바 스크립트를 작성해야합니다. 예를 들어 입력이 비어있는 경우 'x'를 숨기고 Ajax 요청을하는 등의 작업을 수행해야합니다. 참조 http://www.bootply.com/121508를


4
Bootply보다 Plunker를 선호하는 사람은 다음과 같습니다. plnkr.co/edit/c2710u?p=preview
tanguy_k

2
접근성 관점에서 보면 #searchclear범위가 버튼 인 것이 더 낫습니다 . 상호 작용 요소이므로 상호 작용 요소로 표시합니다. 약자로, 키보드 탐색에 의존하는 사용자는, 그것은 쉽게 (화면 판독기와 같은) 보조 기술에 의해 searchclear 기간에하지 탭 인식되지 않습니다 수
이안 디킨슨

3
이 입력을 다른 요소 (예 : 애드온, 드롭 다운 등)와 함께 인라인으로 사용하는 경우에 대한 수정을 시도했습니다. 래핑 div의 클래스를 제거하고로 설정 position: relative한 다음 #searchclear를 조정 z-index: 10; top: 10px하고 제거합니다.bottom: 0
RecuencoJones

위, 아래, 높이가 모순 아닙니까?
nafg

90

매우 간단한 HTML 5 솔루션 :

<input type="search" placeholder="Search..." />

출처 : HTML 5 튜토리얼-입력 유형 : 검색

Chrome 8, Edge 14, IE 10 및 Safari 5 이상에서 작동하며 Bootstrap 또는 기타 라이브러리가 필요하지 않습니다. (불행히도 Firefox는 아직 검색 지우기 버튼을 지원하지 않는 것 같습니다.)

검색 창에 입력하면 'x'가 표시되며 클릭하여 텍스트를 지울 수 있습니다. 이것은 Firefox와 같은 다른 브라우저에서 일반 편집 상자 ( 'x'버튼없이)로 계속 작동하므로 Firefox 사용자는 대신 텍스트를 선택하고 삭제를 누르거나 ...

Firefox에서 지원되는이 유용한 기능이 정말로 필요한 경우 여기에 게시 된 다른 솔루션 중 하나를 input [type = search] 요소에 대한 polyfill로 구현할 수 있습니다. 폴리 필은 사용자의 브라우저가 기능을 지원하지 않을 때 표준 브라우저 기능을 자동으로 추가하는 코드입니다. 시간이 지남에 따라 브라우저가 각 기능을 구현할 때 polyfill을 제거 할 수 있기를 바랍니다. 그리고 어쨌든 폴리 필 구현은 HTML 코드를 깔끔하게 유지하는 데 도움이 될 수 있습니다.

그런데 다른 HTML 5 입력 유형 (예 : "날짜", "번호", "이메일"등)도 평범한 편집 상자로 정상적으로 저하됩니다. 일부 브라우저는 멋진 날짜 선택기, 위 / 아래 버튼이있는 스피너 컨트롤 또는 (휴대폰에서) '@'기호와 '.com'버튼이 포함 된 특수 키보드를 제공 할 수 있지만 제가 아는 한 모든 브라우저는 것 이상 인식 할 수없는 입력 유형에 대한 일반 텍스트 상자를 보여줍니다.


부트 스트랩 3 및 HTML 5 솔루션

Bootstrap 3은 많은 CSS를 재설정하고 HTML 5 검색 취소 버튼을 중단합니다. Bootstrap 3 CSS가로드 된 후 다음 예제에 사용 된 CSS를 사용하여 검색 취소 버튼을 복원 할 수 있습니다.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<style>
  input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: searchfield-cancel-button;
  }
</style>
<div class="form-inline">
  <input type="search" placeholder="Search..." class="form-control" />
</div>

출처 : HTML 5 검색 입력이 부트 스트랩에서 작동하지 않음

이 솔루션이 최신 버전의 Chrome, Edge 및 Internet Explorer에서 작동하는지 테스트했습니다. Safari에서 테스트 할 수 없습니다. 불행히도 검색을 지우는 'x'버튼은 Firefox에 나타나지 않지만 위와 같이 기본적으로이 기능을 지원하지 않는 브라우저 (예 : Firefox)에 대해 polyfill을 구현할 수 있습니다.


2
FWIW :이 기능이 더 이상 Chrome에서 작동하지 않는다고 생각합니다. 더 이상 공식 CSS 사양의 일부가 아닐까요? W3Schools는 "검색 필드는 일반 텍스트 필드처럼 작동합니다"라고 말하며 MDN은이 기능에 대해 언급하지 않습니다. MDN은 새 줄을 제거한다고 말하지만이 입력 유형에 대한 내용입니다.
KyleFarris

3
@KyleFarris 위의 두 가지 방법 모두 Chrome 버전 58.0.3029.110 (64 비트)에서 여전히 작동합니다. 지우기 버튼이 나타나기 전에 검색 창에 무언가를 입력해야합니다.
YipYip

이 최고 등급의 답변은 OP 문제를 어떻게 해결하여 내용을 지우는 텍스트 상자 안에 "지우기"버튼을 표시합니까?
usr-local-ΕΨΗΕΛΩΝ

2
모든 주요 브라우저에서 작동하지 않는 경우 매우 간단한 솔루션이 아닙니다.
thelem

1
@AnandUndavia보고 해 주셔서 감사합니다. 질문이 게시되었을 때 OP가 사용했던 "Bootstrap 3"을 지정하도록 답변을 업데이트했습니다 (2013 년). 시간이있을 때 Bootstrap 4에서 내 대답이 작동하도록 조사하겠습니다.
그는 발

23

너무 많은 사용자 지정 CSS를 피하려고 노력했고 다른 예제를 읽은 후 아이디어를 병합하여이 솔루션을 얻었습니다.

<div class="form-group has-feedback has-clear">
    <input type="text" class="form-control" ng-model="ctrl.searchService.searchTerm" ng-change="ctrl.search()" placeholder="Suche"/>
    <a class="glyphicon glyphicon-remove-sign form-control-feedback form-control-clear" ng-click="ctrl.clearSearch()" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></a>
</div>

부트 스트랩의 JavaScript를 사용하지 않고 Angular와 함께 CSS 만 사용하므로 has-clear 및 form-control-clear 클래스가 필요하지 않으며 AngularJS 컨트롤러에서 clear 함수를 구현했습니다. 부트 스트랩의 JavaScript를 사용하면 자체 JavaScript 없이도 가능할 수 있습니다.


1
입력이 비어있는 경우 표시되지 않도록 X 버튼에 ng-hide를 추가 할 수도 있습니다.
jrvidotti 2015 년

지우기 버튼 ng-click="ctrl.searchService.searchTerm = null"ng-show="ctrl.searchService.searchTerm"
Adrian

18

덕분에 을 연결하지 솔루션은 매우 깨끗했다. 나는 수평 부트 스트랩 양식을 사용하고 있었고 단일 핸들러와 양식 CSS를 허용하기 위해 몇 가지 수정을했습니다.

HTML : - 업데이트] 부트 스트랩의이 피드백 및 형태 제어 피드백을 사용하는

 <div class="container">
  <form class="form-horizontal">
   <div class="form-group has-feedback">
    <label for="txt1" class="col-sm-2 control-label">Label 1</label>
    <div class="col-sm-10">
     <input id="txt1" type="text" class="form-control hasclear" placeholder="Textbox 1">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt2" class="col-sm-2 control-label">Label 2</label>
    <div class="col-sm-10">
      <input id="txt2" type="text" class="form-control hasclear" placeholder="Textbox 2">
      <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>
   </div>
   <div class="form-group has-feedback">
    <label for="txt3" class="col-sm-2 control-label">Label 3</label>
    <div class="col-sm-10">
     <input id="txt3" type="text" class="form-control hasclear" placeholder="Textbox 3">
     <span class="clearer glyphicon glyphicon-remove-circle form-control-feedback"></span>
    </div>   
   </div>
  </form>
 </div>

자바 스크립트 :

$(".hasclear").keyup(function () {
    var t = $(this);
    t.next('span').toggle(Boolean(t.val()));
});
$(".clearer").hide($(this).prev('input').val());
$(".clearer").click(function () {
    $(this).prev('input').val('').focus();
    $(this).hide();
});

예 : http://www.bootply.com/130682


8
부트 스트랩 v3.3.0 이후에는 포인터 이벤트를 none에서 auto로 설정해야합니다. 그렇지 않으면 form-control-feedback을 클릭 할 수 없습니다.
Vizjerai

무엇을 $(".clearer").hide($(this).prev('input').val());합니까? 그냥 될 수 $(".clearer").hide();없습니까?
Jim Buck

그의 의도는 입력에 이미 값이 있는지 여부를 기반으로 숨김 / 표시를 시작하기 위해 hide ()에 진실한 매개 변수를 전달하는 것이라고 가정합니다. 그것이 의도라면 그는 실패했습니다 (숨기기는 항상 숨 깁니다). 그것은해야합니다$(".clearer").toggle(!!$(this).prev('input').val());
제프 Shepler

15

AngularJS / UI-Bootstrap 답변

  • Bootstrap의 has-feedback 클래스를 사용 하여 입력 필드 안에 아이콘을 표시합니다.
  • 아이콘에 style="cursor: pointer; pointer-events: all;"
  • ng-click텍스트를 지우는 데 사용 합니다.

자바 스크립트 (app.js)

var app = angular.module('plunker', ['ui.bootstrap']);

app.controller('MainCtrl', function($scope) {

  $scope.params = {};

  $scope.clearText = function() {
    $scope.params.text = null;
  }

});

HTML (index.html 스 니펫)

      <div class="form-group has-feedback">
        <label>text box</label>
        <input type="text"
               ng-model="params.text"
               class="form-control"
               placeholder="type something here...">
        <span ng-if="params.text"
              ng-click="clearText()"
              class="glyphicon glyphicon-remove form-control-feedback" 
              style="cursor: pointer; pointer-events: all;"
              uib-tooltip="clear">
        </span>
      </div>

플 런커는 다음과 같습니다. http://plnkr.co/edit/av9VFw?p=preview


1

인라인 스타일 및 스크립트로 수행하십시오.

<div class="btn-group has-feedback has-clear">
    <input id="searchinput" type="search" class="form-control" style="width:200px;">
        <a 
id="searchclear" 
class="glyphicon glyphicon-remove-circle form-control-feedback form-control-clear" 
style="pointer-events:auto; text-decoration:none; cursor:pointer;"
onclick="$(this).prev('input').val('');return false;">
</a>
</div>

1

다음은 CSS로 Angularjs \ Bootstrap에 대한 검색 및 지우기 아이콘이있는 작업 솔루션입니다.

    <div class="form-group has-feedback has-clear">
                    <input type="search" class="form-control removeXicon" ng-model="filter" style="max-width:100%" placeholder="Search..." />
                    <div ng-switch on="!!filter">
                        <div ng-switch-when="false">
                            <span class="glyphicon glyphicon-search form-control-feedback"></span>
                        </div>
                        <div ng-switch-when="true">
                            <span class="glyphicon glyphicon-remove-sign form-control-feedback" ng-click="$parent.filter = ''" style="pointer-events: auto; text-decoration: none;cursor: pointer;"></span>
                        </div>
                    </div>                        
                </div>

------

CSS

/* hide the built-in IE10+ clear field icon */
.removeXicon::-ms-clear {
  display: none;
}

/* hide the built-in chrome clear field icon */
.removeXicon::-webkit-search-decoration,
.removeXicon::-webkit-search-cancel-button,
.removeXicon::-webkit-search-results-button,
.removeXicon::-webkit-search-results-decoration { 
      display: none; 
}

1

요소 ID에 바인딩하지 말고 '이전'입력 요소를 사용하여 지우십시오.

CSS :

.clear-input > span {
    position: absolute;
    right: 24px;
    top: 10px;
    height: 14px;
    margin: auto;
    font-size: 14px;
    cursor: pointer;
    color: #AAA;
}

자바 스크립트 :

function $(document).ready(function() {
    $(".clear-input>span").click(function(){
        // Clear the input field before this clear button
        // and give it focus.

        $(this).prev().val('').focus();
    });
});

HTML 마크 업, 원하는만큼 사용 :

<div class="clear-input">
    Pizza: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

<div class="clear-input">
    Pasta: <input type="text" class="form-control">
    <span class="glyphicon glyphicon-remove-circle"></span>
</div>

-7

절대 위치로 이미지 (취소 아이콘)를 배치하고 상단 및 왼쪽 속성을 조정하고 입력 필드를 지우는 메서드 onclick 이벤트를 호출합니다.

<div class="form-control">
    <input type="text" id="inputField" />
</div>
<span id="iconSpan"><img src="icon.png" onclick="clearInputField()"/></span>

CSS에서 그에 따라 범위를 배치하십시오.

#iconSpan {
 position : absolute;
 top:1%;
 left :14%;
}
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.