input field는 standard event들을 receive 합니다. 그리고 jQuery 의 bind
() method에 의해서 observe 될 수 있습니다. jQuery Mobile 터치 스크린이든 기존 컴퓨터이든 같은 이벤트 이름을 사용한다는 걸 기억해 두세요.
Events on the input fields
|
Name |
Signification |
|
click vclick |
A click was made in the field. |
|
focus |
The field has just won the focus. |
|
blur |
The field has lost focus. |
|
change |
The field content has changed (detected when the field loses focus). |
|
keyup |
A keyboard key was pressed. |
|
keydown |
A keyboard key was released. |
|
mousedown vmousedown |
The left mouse button was pressed (or the finger touched the field). |
|
mouseup vmouseup |
The left mouse button was released (or the finger was removed from the screen). |
Taking into account of a click in an input field
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "Name : <input type=text value='Sarrion' />";
$("#home div:jqmData(role=content)").append (html);
$("input").bind ("vclick", function (event)
{
alert ("click");
});
</script>
|
|
|
tistory458_01.html
Taking into account of a click in a search field
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
</div>
</div>
</body>
</html>
<script>
var html = "";
html += "Search : <input type=search value='Your name' id=search />";
$("#home div:jqmData(role=content)").append (html);
$("#search").live ("textinputcreate", function (event)
{
$("#search").bind ("vclick", function (event)
{
alert ("click");
});
});
</script>
|
|
이 예제에서는 search field 가 생성될 때 까지 기다려야 합니다. 안 그러면 <input> element 가 사용하는 bind ("vclick" ...)이 실제 bind ()가 실행 될 때 존재하지 않은 상태가 됩니다. search field 의 HTML 이 자바스크립트에 의해서가 아니라 HTML 로 곧바로 insert 될 때도 같은 문제점이 발생합니다. 아래 예제를 보겠습니다.
Search field inserted directly into the HTML
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content="user-scalable=no,width=device-width" />
<link rel=stylesheet href=jquery.mobile/jquery.mobile.css />
<script src=jquery.js></script>
<script src=jquery.mobile/jquery.mobile.js></script>
</head>
<body>
<div data-role=page id=home>
<div data-role=header>
<h1>Home</h1>
</div>
<div data-role=content>
<p> Window content </p>
Search : <input type=search value="Your name" id=search />
</div>
</div>
</body>
</html>
<script>
$("#search").live ("textinputcreate", function (event)
{
$("#search").bind ("vclick", function (event)
{
alert ("click");
});
});
</script>
'jQuery Mobile > JQM Tutorial' 카테고리의 다른 글
| Ajax 로 selection list 삽입하기 (0) | 2012.11.12 |
|---|---|
| HTML element를 jQuery Mobile selection list로 바꾸기 (0) | 2012.11.12 |
| 다이나믹하게 selection list 생성하기 (0) | 2012.11.11 |
| input field 관련 예제들 (0) | 2012.11.10 |
| Input field 를 customize 하기 (0) | 2012.11.10 |
| input field 에 값 할당하기 (0) | 2012.11.09 |
| Ajax 로 input fields 삽입하기 (0) | 2012.11.07 |
| HTML element 를 jQuery Mobile 의 input field로 변환하기 (0) | 2012.11.07 |
| 다이나믹하게 input field 생성하기 (0) | 2012.11.07 |
| 테이블 manipulation 예제 (0) | 2012.11.06 |