[form] 자바스크립트로 각 인풋 태그마다 포커스/포커스아웃 동작하는 방법(How to do focus/focus out for each input tag with JavaScript)
2021.09.18 00:38
968
0
https://eond.com/441349
object(HotopayModel)#1111 (23) {
["error"]=>
int(0)
["message"]=>
string(7) "success"
["variables"]=>
array(0) {
}
["httpStatusCode"]=>
int(200)
["module"]=>
string(7) "hotopay"
["module_info"]=>
NULL
["origin_module_info"]=>
NULL
["module_config"]=>
NULL
["module_path"]=>
string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/"
["xml_info"]=>
NULL
["module_srl"]=>
NULL
["mid"]=>
NULL
["act"]=>
NULL
["template_path"]=>
NULL
["template_file"]=>
NULL
["layout_path"]=>
NULL
["layout_file"]=>
NULL
["edited_layout_file"]=>
NULL
["stop_proc"]=>
bool(false)
["user"]=>
object(Rhymix\Framework\Helpers\SessionHelper)#1110 (20) {
["member_srl"]=>
int(0)
["user_id"]=>
NULL
["user_name"]=>
NULL
["nick_name"]=>
NULL
["email_address"]=>
NULL
["phone_number"]=>
NULL
["homepage"]=>
NULL
["blog"]=>
NULL
["birthday"]=>
NULL
["denied"]=>
NULL
["status"]=>
NULL
["is_admin"]=>
string(1) "N"
["is_site_admin"]=>
NULL
["profile_image"]=>
NULL
["image_name"]=>
NULL
["image_mark"]=>
NULL
["signature"]=>
NULL
["description"]=>
NULL
["group_list"]=>
array(0) {
}
["menu_list"]=>
array(0) {
}
}
["request"]=>
object(Rhymix\Framework\Request)#10 (13) {
["method"]=>
string(3) "GET"
["compat_method"]=>
string(3) "GET"
["url"]=>
string(32) "javascript/441349/comment/465326"
["hostname"]=>
string(8) "eond.com"
["domain"]=>
NULL
["protocol"]=>
string(5) "https"
["callback_function"]=>
string(0) ""
["_route_status":protected]=>
int(200)
["_route_options":protected]=>
object(stdClass)#11 (5) {
["cache_control"]=>
bool(true)
["check_csrf"]=>
bool(true)
["is_forwarded"]=>
bool(false)
["is_indexable"]=>
bool(true)
["enable_session"]=>
bool(true)
}
["module"]=>
string(5) "board"
["mid"]=>
string(10) "javascript"
["act"]=>
string(16) "dispBoardContent"
["args"]=>
array(4) {
["document_srl"]=>
string(6) "441349"
["comment_srl"]=>
string(6) "465326"
["mid"]=>
string(10) "javascript"
["act"]=>
string(16) "dispBoardContent"
}
}
["ajaxRequestMethod"]=>
array(2) {
[0]=>
string(6) "XMLRPC"
[1]=>
string(4) "JSON"
}
["gzhandler_enable"]=>
bool(true)
}
https://codepen.io/eond/pen/MWoQmbw
HTML
<input type="text"> <input type="text"> <input type="text"> <input type="text"> <input type="text">
JavaScript
let input = document.getElementsByTagName("input");
let i;
for(i=0;i<input.length;i++){
input[i].onfocus = function(){
this.style.backgroundColor='red';
}
input[i].onblur = function(){
this.style.backgroundColor='';
}
}참조
자바스크립트로 모든 태그를 선택하는 방법
https://www.w3schools.com/jsref/met_element_getelementsbytagname.asp
자바스크립트로 포커스/포커스아웃 처리하는 방법(HTML DOM focus() Method)
https://www.w3schools.com/jsref/event_onfocus.asp
2. 포커스됐을 때 밑줄 처리하는 방법
https://codepen.io/eond/pen/PojQmVv
참조
https://www.w3schools.com/jsref/prop_style_border.asp
https://www.w3schools.com/jsref/prop_style_borderbottom.asp
3. 포커스 됐을 때 부모노드에 스타일 주는 방법
https://codepen.io/eond/pen/ExXQmzb
참조
https://www.w3schools.com/jsref/prop_node_parentnode.asp
4. XE, Rhymix 에서 적용시,
jQuery(function ($) {
// Code..
});XE나 라이믹스에서는 꼭 이 코드 안에 작성해야만 동작이 되더군요. 자바스크립트인데도 흠-.-?;
5. jQuery를 활용하는 방법
$("input").focus(function(){
console.log('포커스');
});
$("input").focusout(function(){
console.log('포커스아웃');
})...
$('input').blur(function() {
$('input').removeClass("focus");
})
.focus(function() {
$(this).addClass("focus")
});참조
https://stackoverflow.com/questions/967096/using-jquery-to-test-if-an-input-has-focus
댓글 0
댓글작성칸으로