부트 스트랩 3에서 'x'가있는 검색 상자를 지우려면 어떻게합니까?
부트 스트랩에 문제가 있으므로 도움이 될 것입니다. 감사
내가 원하는 것 :( 상단 부분)
내 현재 코드 :
<div class="form-group">
<input type="text"
class="form-control"
id="findJobTitle"
name="findJobTitle"
placeholder="Job Title, Keywords"
onkeyup="showResult()">
</div>
현재 스크린 샷 :
이와 같은 것을 얻으려면
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를
매우 간단한 HTML 5 솔루션 :
<input type="search" placeholder="Search..." />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을 구현할 수 있습니다.
너무 많은 사용자 정의 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>
Angular와 함께 CSS 만 사용하는 부트 스트랩의 JavaScript를 사용하지 않기 때문에 has-clear 및 form-control-clear 클래스가 필요하지 않으며 AngularJS 컨트롤러에서 clear 함수를 구현했습니다. 부트 스트랩의 JavaScript를 사용하면 자체 JavaScript 없이도 가능할 수 있습니다.
Thanks unwired your solution was very clean. I was using horizontal bootstrap forms and made a couple modifications to allow for a single handler and form css.
html: - UPDATED to use Bootstrap's has-feedback and form-control-feedback
<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>
javascript:
$(".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();
});
example: http://www.bootply.com/130682
AngularJS / UI-Bootstrap Answer
- Use Bootstrap's has-feedback class to show an icon inside the input field.
- Make sure the icon has
style="cursor: pointer; pointer-events: all;" - Use
ng-clickto clear the text.
JavaScript (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 snippet)
<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>
Here's the plunker: http://plnkr.co/edit/av9VFw?p=preview
Do it with inline styles and script:
<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>
Here is my working solution with search and clear icon for Angularjs\Bootstrap with CSS.
<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;
}
요소 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>
절대 위치로 이미지 (취소 아이콘)를 배치하고 상단 및 왼쪽 속성을 조정하고 입력 필드를 지우는 메서드 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%;
}
참고 URL : https://stackoverflow.com/questions/20062218/how-do-i-clear-a-search-box-with-an-x-in-bootstrap-3
'programing tip' 카테고리의 다른 글
| HTTP Get으로 배열 보내기 (0) | 2020.09.20 |
|---|---|
| C #에서 선행 문없이 {} 코드 블록을 허용하는 이유는 무엇입니까? (0) | 2020.09.20 |
| 다형성-단 두 문장으로 정의 (0) | 2020.09.20 |
| 컴파일 시간에 "SimDeviceType 유형에 적합한 장치를 찾지 못함"문제와 함께 iOS 빌드 실패 (0) | 2020.09.20 |
| PHP를 사용하여 원격 파일이 존재하는지 어떻게 확인할 수 있습니까? (0) | 2020.09.20 |