Question

我正在动态创建textareas。我想输入它直到达到页面限制之后，我怎么能禁止在textarea中输入？有人可以帮忙吗？

$("#page1").click( function (event,data) {              
     var newTextAreaDiv = $(document.createElement('div'))
    .attr("id", 'TextAreaDiv' + numTextAreaCounter);
     newTextAreaDiv.html('<textarea rows="1" id= "textbox' + 
         numTextAreaCounter+ ' " '+'style="display:block; max-width:50%;
         max-height:50%;height:50px;width:100px; ></textarea>');             

            newTextAreaDiv.className='notes_textarea';
            newTextAreaDiv.appendTo("#page_right");         
            $("#notesfullpage").trigger('create');
            numTextAreaCounter++;   
});

Answer 1

maxlength＆gt;的textarea属性怎么样？您可以在创建元素时添加它并指定所需的值。

Answer 2

这样，您可以明确地停止用户在输入指定字符后输入字符。

$('#textbox' + numTextAreaCounter).keydown(function() {
   var maxLen = $('#textbox' + numTextAreaCounter).val()).length;
e.keyCode = (e.keyCode != 0)?e.keyCode:e.which; 
if(maxLen>50 && (e.keyCode!=8 || e.keyCode!=46))// setting exceptions for backspace and delete key press.
       return false;
});

Answer 3

每当您的用户键入一个字符时，都会触发按键事件。您甚至可以使用$('#page1').on('keypress', 'textarea', handler)为所有动态生成的textareas处理此问题。

在按键处理程序中，您可以根据可用空间检查textarea的高度。我不知道页面的布局，所以我无法提供100％准确的公式来计算可用空间，但请记住，您可以通过jquery的.height（）方法或通过基本的javascript属性获得所有维度例如window.innerHeight。如果需要，还可以在javascript中使用scrollTop属性。

您可以在检测到textarea达到页面限制时设置一个标志，并在打开时阻止输入。

最终代码将是这样的

var outOfSpace = false;

$('#page1').on('keypress', 'textarea', handler);

$('#page1').on('keypress', 'textarea', function() {
    if (outOfSpace)
        return false;
});

我没有测试过这个。在keyup或keyup和keypress上绑定第二个处理程序可能更具跨浏览性。

如何在使用jquery或jquery-mobile达到页面大小限制时停止在textarea中键入？

3 个答案: