达到最大输入长度时的工具提示

Question

是否可以为输入类型的文本提供工具提示，以防该文本框在html中达到最大长度？

Answer 1

可以，您可以将工具提示设置为文本框

/*
 txtname id of youe textbox
 val is value of textbox
 ccount is max length of textbox. 
 if ccount is set to 4 then 
 if value of textbox exceed then 4 then it will show tooltip
 */
function txtToolTip(txtname, val, ccount) {
    var txtTool = document.getElementById(txtname);
    if (txtTool.value.length > ccount) {
        //Setting tool tip value.
        txtTool.title = txtTool.value;
    }
}

您的输入框是

<input type="text" name="txtnm" id="txtnm" onkeyup="txtToolTip(this.id, this.value, 4);"/>

Answer 2

你可以使用我的代码来解决你的问题：

​

<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Input Key Filter Test</title>
	<meta name="author" content="Andrej Hristoliubov anhr@mail.ru">
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	
	<!-- For compatibility of IE browser with audio element in the beep() function.
	https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible -->
	<meta http-equiv="X-UA-Compatible" content="IE=9"/>
	
	<link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css">		
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script>
	<script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script>
	
</head>
<body>
	<h1>Text field. String length is limited to 10 sumbols</h1>
    Max Length input field: 
    <input type='text' id='maxLength' maxlength ="11" />
    New string: <span id="newString"></span>
    <script>
        CreateMaxLengthFilter('maxLength', {
            formatMessage: 'Length limit to %s sumbols'
            , onerror: function (elementInput) {
                elementInput.focus();//except Firefox
            }
            , onblur: function (event) {
                document.getElementById('newString').innerHTML = event.target.value;
            }
        });
    </script>

</body>
</html>

​