Create a Clearable TextBox with jQuery
4309 단어 JavaScript
Create a Clearable TextBox with jQuery
Recently I came across a wonderful article by David Walsh on Clearable Textboxes with Dojo Toolkit [ link ]. This is a simple implementation where a clear button (x) added in a textbox which lets user to clear the content of the textbox. I have seen this simple feature in many websites and feel its very useful to have. It increase the usability of form.
I thought to implement the same feature using jQuery. Here is a simple plugin that I wrote to add clearable feature to any textbox in your HTML form. All you need is to call clearable() method on the textbox. For example.
...
<script type="text/javascript" src="jquery.clearable.js"></script>
<link rel="stylesheet" href="jquery.clearable.css"
type="text/css" media="screen" />
...
<input type="text" class="foo"></input>
<script>
$(document).ready(function() {
$('.foo').clearable();
});
</scrip>
In above example we included jquery.clearable plugin javascript and stylesheet files. Then called .clearable() method on the textboxes we want to add clearable feature. That’s it
Let us go through the code and see what exactly goes behind the scene in jquery clearable plugin.
The CSS
We use following stylesheet classes internally to display the
.divclearable {
border: 1px solid #888;
display: -moz-inline-stack;
display: inline-block;
zoom:1;
*display:inline;
padding-right:5px;
vertical-align:middle;
}
a.clearlink {
background: url("close-button.png") no-repeat scroll 0 0 transparent;
background-position: center center;
cursor: pointer;
display: -moz-inline-stack;
display: inline-block;
zoom:1;
*display:inline;
height: 12px;
width: 12px;
z-index: 2000;
border: 0px solid;
}
There are two css classes we uses in clearable plugin. First one is for a wrapper DIV which wraps around the textbox and clear button (x). And the style class is for clear button (x).
The JavaScript
The important bit of the plugin is javascript code that creates clearable effect. For everytextbox, we wrap it around a DIV container and also add one clear button (x) in this container DIV.
Here is the jQuery code:
$(this).css({'border-width': '0px', 'outline': 'none'})
.wrap('<div id="sq" class="divclearable"></div>')
.parent()
.attr('class', $(this).attr('class') + ' divclearable')
.append('<a class="clearlink" href="javascript:"></a>');
$('.clearlink')
.attr('title', 'Click to clear this textbox')
.click(function() {
$(this).prev().val('').focus();
});
In above javascript code, we do:
Also for each clear text link (x) we add an onclick handler where we clear the corresponding textbox and set focus in it.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
기초 정리 - 1문자 (String) 숫자 (Number) 불린 (Boolean) null undefined 심볼 (Symbol) 큰정수 (BigInt) 따옴표로 묶어 있어야 함 Not-A-Number - 숫자 데이터 / 숫자로 표...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.