hanker

Kendo - kendo TextBox (3) (JQuery - placeholder) 입력 안내 본문

JavaScript/Kendo

Kendo - kendo TextBox (3) (JQuery - placeholder) 입력 안내

hanker 2024. 9. 18. 16:28
반응형

이전 글에서는 clear button 생성하는 방법에 대해서 적었는데, 이번 글에서는 많이 쓰는 placeholder에 대해서 적어본다.

 

placeholder를 쓰는 이유는 input 이나 textarea 태그에 어떤 값으로 입력할 지 미리 안내를 해주는 역할을 하는데, 사용자 입장에서는 편의성이 더욱 올라간다. label 태그로도 설명이 가능하지만 더욱 더 직관적이라고 생각한다.

 

주로 회원가입이나, 양식에 맞게 제출해야될 입력 폼에서 많이 사용되는데, 여러 홈페이지들을 살펴보면 간단하게 추가할 수 있음에도 없는 경우가 많다. 나도 추가하는 경우가 있고, 안하는 경우가 있는데, 귀찮더라도 추가하자라는 입장이다.

 

적용하는 방법을 알아보자.

<style>
    .k-textbox .k-input-inner::placeholder {
        color: #4287f5;
        font-size: 12px;
    }
</style>
<html>
<head>
    <title>Title</title>
</head>

<body>
    <h2>Hello, Hanker~!</h2>

    <input type="password" name="name" id="textbox" class="textbox" style="width: 300px;" value=""/>
    <input type="text" name="name" id="textboxB" class="textbox" style="width: 300px;" value=""/>

</body>

<script>
    $(".textbox").kendoTextBox({
        placeholder : "필수값입니다."
    });
</script>
</html>

css 까지 추가해줘서 이쁘게 나온다.  물론 각 태그에다가 placeholder 속성을 추가해서 작성해도 되지만, 여러 textbox에 

일괄 적용시켜야 할 경우에 이렇게 적용해주면 코드가 매우 깔끔해진다.

 

결과.

 

https://docs.telerik.com/kendo-ui/api/javascript/ui/textbox/configuration/placeholder

 

placeholder - API Reference - Kendo UI TextBox - Kendo UI for jQuery

 

docs.telerik.com

 

 

 

 

반응형
저작자표시

'JavaScript > Kendo' 카테고리의 다른 글

Kendo - KendoGrid (Jquery) 그리드(테이블) CSS 수정 UI (2)  (0) 2024.09.22
Kendo - KendoGrid (Jquery) 그리드(테이블) 생성 UI (1)  (1) 2024.09.21
Kendo - kendo TextBox (4) (JQuery - enable) 입력 안내  (0) 2024.09.19
Kendo - kendo TextBox (2) (JQuery - clear button) 내용 삭제  (0) 2024.09.18
Kendo - Kendo TextBox (1) (JQuery)  (1) 2024.09.16
'JavaScript/Kendo' Related Articles more