작성일 : 11-11-30 14:22
|
[JQuery] (JQuery Source) 내용 복사 , 암호 비교
|
 |
|
글쓴이 :
조형래
 조회 : 4,931
|
<!-- 내용 복사 -->
<script src="../js/jquery-1.3.2-vsdoc2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
// 첫번째 텍스트박스의 값을 두번째 텍스트박스로 복사
$('#btnCopy').click(function () {
$('#txtID').val($('#txtUserID:text').val());
});
});
</script>
<div>
아이디 : <input type="text" id="txtUserID" />
<hr />
<input type="button" id="btnCopy" value="복사" />
<hr />
아이디 : <input type="text" id="txtID" />
</div>
<!-- 암호비교 -->
<script type="text/javascript">
$(document).ready(function () {
//[1] lblError 레이어 클리어
$('#txtPassword').keyup(function () {
// $('#lblError').remove(); // 제거
$('#lblError').text(''); // 클리어
});
//[2] 암호 확인 기능 구현
$('#txtPasswordConfirm').keyup(function () {
if ($('#txtPassword').val() != $('#txtPasswordConfirm').val()) {
$('#lblError').text(''); // 클리어
$('#lblError').html("<b>암호가 틀립니다.</b>"); // 레이어에 HTML 출력
}
else {
$('#lblError').text(''); // 클리어
$('#lblError').text("<b>암호가 맞습니다.</b>"); // 레이어에 텍스트 출력
}
});
});
</script>
<table style="border: 1px solid skyblue;">
<tr>
<td>암호:</td>
<td><input type="password" id="txtPassword" size="20"></td>
</tr>
<tr>
<td>암호확인:</td>
<td><input type="password" id="txtPasswordConfirm" size="20"></td>
</tr>
</table>
<div id="lblError">암호를 입력하시오.</div>
<!-- 콤보박스 값 복사 -->
<script type="text/javascript">
$(document).ready(function () {
// 콤보박스가 변경될 때
$('#lstFavorites').change(function () {
// 드롭다운리스트에서 선택된 값을 텍스트박스에 출력
var selectedText = // $("#lstFavorites option:selected").text();
// $("option:selected").text();
$(":selected").text();
$('#txtFavorite').val(selectedText);
});
});
</script>
<select id="lstFavorites">
<option>C#</option>
<option>ASP.NET</option>
<option>Silverlight</option>
</select>
<hr />
<input type="text" id="txtFavorite" />
<!-- input값 반환 -->
<script type="text/javascript">
$(document).ready(function () {
// Init
$('#txtName').val("RedPlus"); // 단일값
$('input:radio').val(['F']); // 다중값 : []
$('#lstFavorites2').val(['0', '2']); // 다중값 : [,]
$('#btnOK').click(function () {
var msg = "";
//[1] 반드시 폼 요소의 value 속성을 가져온다. <> 에러
msg += $('#txtName').val() + '\n';
//[2] 라디오버튼의 체크된 value 속성을 가져옴 <> undefined
msg += $('input:radio[name=Gender]:checked').val() + '\n';
//[3] 리스트박스에서 여러개 값 가져오기
msg += $('#lstFavorites2').val().join(" | ") + '\n';
//[!]
alert(msg);
});
});
</script>
텍스트박스 : <input type="text" id="txtName" /><br />
라디오버튼 :
<input type="radio" id="optGender1" name="Gender" value="M" />남
<input type="radio" id="optGender2" name="Gender" value="F" />여<br />
드롭다운리스트 :
<select id="lstFavorites2" multiple="multiple" size="3">
<option value="0">JavaScript</option>
<option value="1">jQuery</option>
<option value="2">Prototype</option>
</select><br />
<input type="button" value="확인" id="btnOK" />
|
|
986
