텍스트 상자 입력시 값을 매번 지우지 않고도 좋게 한다
구현할 기능
Web서비스의 폼 입력 화면을 개발하고 있을 때, 이하의 기능을 구현하고 싶어서 조사해 보았다.
텍스트 박스에 값이 들어가 있을 때, 값을 재기록하는 경우에, 매회 들어 있는 값을 지워야 한다.
이것이 번거롭기 때문에, 일일이 지워지지 않아도 좋게 하고 싶다.
예를 들어 아래와 같은 테이블에서 각 행에 개수의 입력란이 있을 때.
개수란의 수치는 0으로 되어 있다. 개수란을 클릭하면, 0의 경우는 0을 자동적으로 지워, 공란으로 하고 싶다.
그러면, 예를 들어 값을 2로 하고 싶다면, 2를 1회 입력하는 것만으로 끝난다. 일부러 BackSpace나 Del을 눌러 0을 지울 필요가 없다.
또, 그 후 아무것도 입력하지 않고 커서가 떨어진 경우는, 원래의 제로의 값으로 되돌리고 싶다.
이러한 기능을 JavaScript로 구현한다.
구현된 결과
아래 이미지와 같은 느낌. 처음 1행째의 개수란을 클릭하면, 0이 자동적으로 사라진다. 그래서 2를 입력한다.
다음으로, 2행째의 개수를 클릭하면, 마찬가지로 0이 자동적으로 사라진다.
하지만 아무것도 입력하지 않고 3행째로 커서를 옮겼기 때문에, 2행째는 0의 표시로 돌아온다.
코드
table 요소나 input 요소 등 html이나 css에 특별한 궁리는 필요 없다. 해당 input 요소가 form 태그 내에 있고 type이 number라고 한다.
body내에 onload를 써, form 태그내에 있는 모든 input 요소에 대해서, type가 number이면, onfocus와 onblur를 타는 처리를 실시한다. 그러면 커서가 맞을 때 onfocus 메서드가 실행됩니다. 커서가 빠졌을 때 onblur가 달리게 된다. input 요소의 0과 같은 값 (value 속성)은 php, Python 및 서버 측 언어로 구현됩니다.
test.html<html>
<body>
<form>
<table>
<tbody>
<tr>
<td>
…（略）
<input type="number" id="hoge1" name="hoge1">
…（略）
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
window.onload = function() {
var obj = document.forms;
if (!obj) return;
for (var i = 0; i < obj.length; i++) {
var ele = obj[i].elements;
for (var j = 0; j < ele.length; j++) {
// 乗っけたくない要素はここで除外する。
if (ele[j].type != "number") continue;
ele[j].onfocus = zero2Empty;
ele[j].onblur = empty2Zero;
}
}
}
function zero2Empty() {
if (this.value == 0) this.value = "";
}
function empty2Zero() {
if (!this.value) this.value = 0;
}
</script>
</body>
</html>
참고 URL
안퐁탄님의 이하의 기사를 참고로 했습니다. 고마워요.
표시된 문자를 입력할 때 삭제
Reference
이 문제에 관하여(텍스트 상자 입력시 값을 매번 지우지 않고도 좋게 한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miltood/items/34f5dc74ad0608c1b072
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
아래 이미지와 같은 느낌. 처음 1행째의 개수란을 클릭하면, 0이 자동적으로 사라진다. 그래서 2를 입력한다.
다음으로, 2행째의 개수를 클릭하면, 마찬가지로 0이 자동적으로 사라진다.
하지만 아무것도 입력하지 않고 3행째로 커서를 옮겼기 때문에, 2행째는 0의 표시로 돌아온다.
코드
table 요소나 input 요소 등 html이나 css에 특별한 궁리는 필요 없다. 해당 input 요소가 form 태그 내에 있고 type이 number라고 한다.
body내에 onload를 써, form 태그내에 있는 모든 input 요소에 대해서, type가 number이면, onfocus와 onblur를 타는 처리를 실시한다. 그러면 커서가 맞을 때 onfocus 메서드가 실행됩니다. 커서가 빠졌을 때 onblur가 달리게 된다. input 요소의 0과 같은 값 (value 속성)은 php, Python 및 서버 측 언어로 구현됩니다.
test.html<html>
<body>
<form>
<table>
<tbody>
<tr>
<td>
…（略）
<input type="number" id="hoge1" name="hoge1">
…（略）
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
window.onload = function() {
var obj = document.forms;
if (!obj) return;
for (var i = 0; i < obj.length; i++) {
var ele = obj[i].elements;
for (var j = 0; j < ele.length; j++) {
// 乗っけたくない要素はここで除外する。
if (ele[j].type != "number") continue;
ele[j].onfocus = zero2Empty;
ele[j].onblur = empty2Zero;
}
}
}
function zero2Empty() {
if (this.value == 0) this.value = "";
}
function empty2Zero() {
if (!this.value) this.value = 0;
}
</script>
</body>
</html>
참고 URL
안퐁탄님의 이하의 기사를 참고로 했습니다. 고마워요.
표시된 문자를 입력할 때 삭제
Reference
이 문제에 관하여(텍스트 상자 입력시 값을 매번 지우지 않고도 좋게 한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/miltood/items/34f5dc74ad0608c1b072
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<html>
<body>
<form>
<table>
<tbody>
<tr>
<td>
…（略）
<input type="number" id="hoge1" name="hoge1">
…（略）
</td>
</tr>
</tbody>
</table>
</form>
<script type="text/javascript">
window.onload = function() {
var obj = document.forms;
if (!obj) return;
for (var i = 0; i < obj.length; i++) {
var ele = obj[i].elements;
for (var j = 0; j < ele.length; j++) {
// 乗っけたくない要素はここで除外する。
if (ele[j].type != "number") continue;
ele[j].onfocus = zero2Empty;
ele[j].onblur = empty2Zero;
}
}
}
function zero2Empty() {
if (this.value == 0) this.value = "";
}
function empty2Zero() {
if (!this.value) this.value = 0;
}
</script>
</body>
</html>
Reference
이 문제에 관하여(텍스트 상자 입력시 값을 매번 지우지 않고도 좋게 한다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/miltood/items/34f5dc74ad0608c1b072텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
