相关疑难解决方法(0)

我在我的网站上有一些区域,我需要将文本输入限制为X个字符数量,并且在用户输入时显示剩余的空格很好,比如twitter.

我找到了这个jquery插件; jquery max-length插件

它只是我需要的东西,但它看起来有点像矫枉过正,我不确定文件大小,但它看起来像这么简单的任务的很多代码行,你认为我会更好地使用非jquery方法？我之所以考虑jquery,是因为jquery已经包含在我的所有页面 UPDATE中;

我刚刚发现这种非jquery方法完全相同的方法是占用更小的空间,所以这是更好的方法吗？

<script language="javascript" type="text/javascript">
function limitText(limitField, limitCount, limitNum) {
   if (limitField.value.length > limitNum) {
    limitField.value = limitField.value.substring(0, limitNum);
   } else {
    limitCount.value = limitNum - limitField.value.length;
   }
}
</script>

You have 
<input readonly type="text" name="countdown" size="3" value="1000">
characters left.

这个练习有点棘手.想我会发布我的解决方案,看看有没有人做过不同的事情,或者是否有人知道更好的方式.

我不确定使用Asset Pipline的最佳实践..例如,将内容放入application.js清单文件中的正确顺序,或何时将内容放入lib与app中.我只是在lib中添加以下内容以尝试使其工作.

来自Michael Hartl的Rails教程第2 章第10章,练习7:

(具有挑战性)将JavaScript显示添加到主页以从140个字符开始倒计时.

首先,我读了这篇关于jQuery类似Twitter的倒计时的帖子,它提供了执行此操作的代码.

接下来,我更新了app/views/shared/_micropost_form.html.erb,如下所示:

<%= form_for(@micropost) do |f| %>
    <%= render 'shared/error_messages', object: f.object %>
    <div class="field">
        <%= f.text_area :content, placeholder: "Compose new micropost..." %>
    </div>
    <%= f.submit "Post", class: "btn btn-large btn-primary" %>
    <span class="countdown"></span>

<% end %>

然后,我在lib中创建了一个javascripts目录并添加了文件

LIB /资产/ JavaScript的/ microposts.js

function updateCountdown() {
    // 140 is the max message length
    var remaining = 140 - jQuery('#micropost_content').val().length;
    jQuery('.countdown').text(remaining + ' characters remaining');
}

jQuery(document).ready(function($) {
    updateCountdown();
    $('#micropost_content').change(updateCountdown);
    $('#micropost_content').keyup(updateCountdown);
}); …

所以我将maxlengthmy 的值设置textarea为 200，我想显示一个很好的倒计时功能，显示他们在输入时还剩下多少个字符。

我的 HTML 如下：

<tr>
    <th width="20%" scope="row" valign="top">Description<div id="characters-left"></div></th>
    <td width="80%"><textarea id="text-area" style="width: 48%" name="poll-description" value="" maxlength="200"></textarea></td>
</tr>

我尝试使用的 JS 是这样的：

<script>
    window.onload = textareaLengthCheck();

    function textareaLengthCheck() {
    var textArea = document.getElementById('text-area').value.length;
    var charactersLeft = 200 - textArea;
    var count = document.getElementById('characters-left');
    count.innerHTML = "Characters left: " + charactersLeft;
}
</script>

如果可能的话，我宁愿使用普通的 javascript 而不是 jQuery 来完成此操作。有任何想法吗？