hanker

Kendo - kendo TextBox (2) (JQuery - clear button) 내용 삭제 본문

JavaScript/Kendo

Kendo - kendo TextBox (2) (JQuery - clear button) 내용 삭제

hanker 2024. 9. 18. 01:26
반응형

이전에 올렸던 kendo TextBox 설정하는 글을 올렸었는데, 

그냥 작성만 해주는 기능 뿐 아니라 여러가지 옵션들을 추가할 수 있다.

 

client 측면에서 textbox안에 내용들을 지울 수 있는 버튼이 있으면 시각적으로나, 편의적으로나 효율적이다.

 

그러나 해당 clear button을 만들더라도 Client 측면에서 위화감이 느끼지 않게 만들기란 쉽지는 않다.

 

다행히도 Kendo에서 특정옵션을 추가만 해준다면 가볍게 추가가 된다.

 

아래 코드로 살펴보자

<html>
<head>
    <title>Title</title>
</head>
<body>

<h2>Hello Hanker.</h2>

<input type="text" id="textBox" class="textBox" style="width: 200px;" />
<input type="text" id="textBoxB" class="textBox" style="width: 200px;" />
</body>

<script>
    $(function(){
        $(".textBox").kendoTextBox();
    })
</script>
</html>

이전 글에서 올린내용처럼 간단하게 kendoTextBox를 사용한 예이다.

아이디 값이 textBoxB인 textbox에 clearbutton을 추가해보겠다.

<script>
    $(".textBox").kendoTextBox({
        clearButton: true
    });
</script>

기존 kendotextbox 선언과 달리 내부에 option을 추가해줬다.

 

 

결과.

Textbox안에 값이 입력이 되어있으면 우측 X icon이 활성화되고, 우측 X icon을 클릭하게 되면 textbox 안에 값이 지워진다.

 

 

끝

 

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

반응형
저작자표시

'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 (3) (JQuery - placeholder) 입력 안내  (0) 2024.09.18
Kendo - Kendo TextBox (1) (JQuery)  (1) 2024.09.16
'JavaScript/Kendo' Related Articles more