서식 재설정 버튼에 자바 스크립트가 필요합니다.

Question

텍스트 영역에 입력 한 문자 수를 계산하는 자바 스크립트 카운터뿐만 아니라 텍스트 영역이있는 양식이 있습니다. 텍스트 영역과 카운터에 입력 한 내용을 모두 다시 설정하는 버튼이 필요합니다.

이것은 내 양식 코드 :

<script type="text/javascript"> 
function change (el) { 
    var max_len = el.name == 'left' ? 60 : 320; 
    if (el.value.length > max_len) { 
     el.value = el.value.substr(0, max_len); 
    } 
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length; 
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - 
    el.value.length; 
    return true; 
} 
</script> 

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin- 
bottom: 20px;">Enter meta title tag</h2> 

<form id="title"> 
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
rows="2" maxLength="60" onkeyup="change(this);"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
character(s) out of a possible 60. You are allowed <span 
id="left_chars_left"><b>lots</b></span> more 

<input class="btn btn-primary" type="button" value="reset title" /> 

</form> 

자바 스크립트 아래의 텍스트는 텍스트 영역에 입력하지만이 기간 "left_char_cnt"무엇 자바 스크립트가

<script> 
function myFunction() { 
    document.getElementById("title").reset(); 
} 
</script> 

내에서 카운터를 재설정하지 않습니다 재설정 둘 다 재설정해야합니까?

Answer 1

아무튼 저장하지 않으면 요소의 텍스트/HTML을 "재설정"할 수 없습니다. reset()은 양식 입력에만 작동합니다.

그렇다면 요소의 HTML 콘텐츠를 다시 작성해야합니다. 텍스트의 단어를 계산하는

<script> 
function myFunction() { 
    document.getElementById("title").reset(); 
    document.getElementById("left_char_cnt").innerHTML = '<b>0</b>'; 
} 
</script> 

Answer 2

스크립트가 작동하지 않습니다, 나는 텍스트 영역을 & 수

function myfun(){ 
 
document.getElementById('txtarea').value=' '; 
 
document.getElementById('count').innerHTML='0'; 
 

 
}

<form id="title"> 
 
<textarea id="txtarea" style="border: 1px solid #eb008b;" cols="100" name="left" 
 
rows="2"></textarea>You've typed <span id="left_char_cnt"><b id=count>123</b></span> 
 
character(s) out of a possible 60. You are allowed <span 
 
id="left_chars_left"><b >lots</b></span> more 
 

 
<input class="btn btn-primary" type="button" onclick="myfun()" value="reset title" /> 
 

 
</form> 
 
<script type="text/javascript"> 
 
function change (el) { 
 
    var max_len = el.name == 'left' ? 60 : 320; 
 
    if (el.value.length > max_len) { 
 
     el.value = el.value.substr(0, max_len); 
 
    } 
 
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length; 
 
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - 
 
    el.value.length; 
 
    return true; 
 
} 
 
</script>

Answer 3

가장 간단한 방법은 코드 당신을 다시 사용하는 것입니다 취소 스크립트를 만들어 이미 가지고 있으며 변경 이벤트 처리기가 값을 올바르게 설정하도록 허용합니다. 그런 식으로, 만약 당신이 그 기능의 행동을 바꾸면 리셋 또한 그것과 일치하도록 바뀔 것입니다.

또한 텍스트 영역을 벗어날 때가 아니라 텍스트가 바뀌면서 업데이트되도록 코드를 약간 수정했습니다.

이 시도 ...

function change (el) { 
 
    var max_len = el.name == 'left' ? 60 : 320; 
 
    if (el.value.length > max_len) { 
 
     el.value = el.value.substr(0, max_len); 
 
    } 
 
    document.getElementById(el.name + '_char_cnt').innerHTML = el.value.length; 
 
    document.getElementById(el.name + '_chars_left').innerHTML = max_len - el.value.length; 
 
    return true; 
 
} 
 

 
var textarea = document.querySelector("#title textarea"); 
 

 
textarea.addEventListener("keyup", function() { change(this); }); 
 

 
document.querySelector("#reset-button").addEventListener("click", function() { 
 
    textarea.value = ""; 
 
    change(textarea); 
 
});

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin- 
 
bottom: 20px;">Enter meta title tag</h2> 
 

 
<form id="title"> 
 
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
 
rows="2"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
 
character(s) out of a possible 60. You are allowed <span 
 
id="left_chars_left"><b>lots</b></span> more 
 

 
<input class="btn btn-primary" type="button" id="reset-button" value="reset title" /> 
 

 
</form>

Answer 4

이 기능을 사용, 교체하여 'myFunction()'

<script> 
function myFunction() { 
    document.getElementById("title").reset(); // reset your form 
    document.getElementById("left_char_cnt").innerHTML = '<b>0</b>'; //reset your span counter 
} 
</script> 

Answer 5

var t = document.getElementsByTagName('textarea')[0]; 
 
var a = document.getElementById('left_char_cnt'); 
 
var b = document.getElementById('left_chars_left') 
 
t.addEventListener('keyup',function(){ 
 
var value = t.value.length; 
 
var maxval = 60; 
 
a.innerHTML = value 
 
b.innerHTML = (maxval- value) 
 
if(value == 60){ a.maxLength = maxval} 
 
}) 
 
function resetVal(){ 
 
t.value = null; 
 
a.innerHTML = '<b>0</b>' 
 
b.innerHTML = '<b>lots</b>' 
 
}

<h2 style="background-color: #eee; padding: 10px 20px 10px 20px; margin- 
 
bottom: 20px;">Enter meta title tag</h2> 
 

 
<form id="title"> 
 
<textarea style="border: 1px solid #eb008b;" cols="100" name="left" 
 
rows="2" maxlength="60"></textarea>You've typed <span id="left_char_cnt"><b>0</b></span> 
 
character(s) out of a possible 60. You are allowed <span 
 
id="left_chars_left"><b>lots</b></span> more 
 

 
<input class="btn btn-primary" type="button" onclick='resetVal()' value="reset title"/> 
 

 
</form>