사용자가 텍스트 상자에 글을 쓸 때 동적 텍스트 제한 (HTML)

HTML/자바 스크립트 (또는 PHP도 가능)로 구현해야합니다. 사용자가 필드에 텍스트를 쓸 때 트위터처럼 작동합니다 왼쪽.사용자가 텍스트 상자에 글을 쓸 때 동적 텍스트 제한 (HTML)

당신은 간단한 및 쉽게 스크립트 예제를 도와 줄 수 있습니까?

2010-05-29 DomingoSL

<script> 
function checkCharCount(textfield){ 
    if(textfield.value.length > 300) textfield.value = textfield.value.substr(0, 300); 
    document.getElementById("charCounter").innerHTML = 300 - textfield.value.length; 
} 
</script> 

<textarea class="input" name="REMARK" rows="5" cols="45" maxlength="300" wrap="virtual" onKeyUp="checkCharCount(this);"></textarea> 
<div><span id="charCounter">300</span> characters left.</div>

출처

2010-05-29 19:56:16 Raine

일에 가치를 즐겨 찾기 그들의 데모 페이지를 확인 http://www.quirksmode.org/dom/events/cutcopypaste.html 에서 참조 및 브라우저 호환성 노트를보고 (헤이, 단지 도우려고) 및 jqInputLimit 플러그인 등이 있습니다. ' – karim79

'cut' 및'paste' 이벤트를 처리하고, 사용자가 입력 상자에 텍스트를 드래그하는 경우'mouseup'을 사용할 수도 있습니다. –

키보드로 잘라내어 붙여 넣기가 이미 지정된 스크립트에서 작동하고 마우스로 붙여 넣기하면 텍스트 영역에 maxlength = "300"(대부분의 브라우저에서) 때문에 300 자 이상을 붙여 넣을 수 없습니다. 그러나 그것은 사려 깊은 배려입니다, 팀. – Raine

나는 this one과 같은 JQuery 플러그인을 사용합니다. PHP로 할 수는 있지만 꽤 .. 음 .. 틀렸어. PHP는 서버에서 실행되므로 모든 keydown을 사용하여 서버와주고받을 수 있습니다. Javascript는 클라이언트 측에서 실행되므로이 여분의 페이로드는 필요하지 않습니다. 마우스를 가져 가면 PHP에서 최대 값을 지정하고 클라이언트에 원래 응답으로 보내고 클라이언트 측 JavaScript에서 사용할 수 있습니다.

출처

2010-05-29 19:57:18

Tim Down은 마우스가 아닌 키보드로 붙여 넣기를 감지하는 방법에 대해 궁금해했습니다. 테스트 페이지로 인터넷을 시도하고 시행 착오를 한 후에 나는이 RATHER 간단하지만 효과가있는 크로스 브라우저 [기능만큼 만족 스럽지만 제공 할 수있는 솔루션을 얻을 수 있지만 자바 스크립트를 만족하지 못할 수 있습니다 접근 방식에 순진한 사람들.

<head> 
<script> 
function checkCharCount(){ 
    textfield = document.getElementById('remark'); 
    //if(textfield.value.length > 300) // does not register length change until the next paste or keyup 
    textfield.value = textfield.value.substr(0, 300); 
    document.getElementById("charCounter").innerHTML = 300 - textfield.value.length; 
} 
</script> 
</head> 
<body> 

<textarea id="remark" class="input" name="remark" rows="5" cols="45" wrap="virtual" onkeyup="checkCharCount();" onpaste="setTimeout(checkCharCount, 20);"></textarea> 
<div><span id="charCounter">300</span> characters left.</div> 

</body>

사용 'jQuery를 게시하지 내 주관적인 의견

출처

2010-05-31 06:03:30 Raine

+1입니다. 그것은 매우 합리적인 접근법입니다. 한가지 : 문자열 대신 함수 참조를 window.setTimeout 호출에 전달하는 것이 좋습니다 :'onpaste = "window.setTimeout (checkCharCount, 20);". 문자열을 사용하는 것은'eval()'을 호출하는 것과 같습니다. 이것은 위험하므로 피해야합니다. –

그게 좋은 지적이야, 팀, 고마워! – Raine

사용자가 텍스트 상자에 글을 쓸 때 동적 텍스트 제한 (HTML)

답변

관련 문제