[Clearable Text Fieldライブラリ] テキストフィールドに消去ボタン(×)を追加する

説明

Clearable Text Fieldライブラリでテキストフィールドに消去ボタン(×)を追加するには必要なスタイルシートファイルを読み込ませます。あとはページが読み込まれたら$("input[type=text]").clearableTextField()とすれば文字が入力された際にテキストフィールドに消去ボタン(×)が追加されます。また、HTML 4.01標準モードかXHTMLでないとテキストフィールドのサイズが小さくなるなどの不具合が発生します。

サンプルプログラム

【HTML】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>Sample</title>
<link rel="stylesheet" href="css/jquery.clearableTextField.css" type="text/css" media="all" />
<link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery.clearableTextField.js"></script>
<script type="text/javascript" src="js/sample.js"></script>
</head>
<body>
<h1>テキストフィールドに消去ボタン(×)を追加</h1>
<form>
名前:<input type="text" name="uname" id="uname" /><br />
住所:<input type="text" name="uadrs" id="uadrs" /><br />
</form>
</body>
</html>

【sample.js】
$(function(){
$("input[type=text]").clearableTextField();
});
サンプルを実行
[戻る]