【问题标题】:Create a <br /> when you press Enter按 Enter 时创建一个 <br />
【发布时间】:2012-01-06 22:13:57
【问题描述】:

我已经制作了一个 textarea 表单,您可以在其中更改您的描述,就像在我之前的问题中一样,我问是否有任何禁止标签的方式。但是现在有什么方法可以在您按 Enter 时在 textarea 中设置 &lt;br /&gt;,这样用户就不必在每次想要换行时都输入 &lt;br /&gt; ?

我想如果它可以找到什么都没有的地方,但是这可行吗?我不熟悉 onpress 事件...或者如果它在用户按下提交后检查输入,然后检查换行符。

我在 YouTube 、这个网站和许多其他网站上也看到过这个。

【问题讨论】:

  • 您是否希望 textarea 在用户按下回车时自动添加可见字符串“
    ”,或者您是否希望 textarea 不显示它但将其包含在后端假设值是否提交到数据库?
  • 如果您还允许某些 HTML,并且其中包含一些块元素(例如 P),您可能会出现双换行符。

标签: php javascript html onkeyup onkeypress


【解决方案1】:

在 PHP 中,您可以使用 nl2br() 函数将任何换行符替换为 &lt;br /&gt; 标记。

【讨论】:

  • 不客气。实际上,我对回答犹豫不决,因为我不确定您是在寻找前端还是后端实现,因为您的标签同时列出了 PHP 和 JavaScript。我是一个 PHP 人,所以我按照我所知道的去做。 ;) 很高兴为您提供帮助。
  • 我是这个网站的新手,请问您能告诉我该怎么做吗?我在任何地方都找不到按钮!
  • 我的回答的投票区域下方有一个复选标记。如果您单击它,它会将答案标记为已接受。这是可选的,但值得赞赏。
【解决方案2】:
<script src="jquery.js"></script>
<script>
    $(function ()
    {
        $('#txt').keyup(function (e){
            if(e.keyCode == 13){
                var curr = getCaret(this);
                var val = $(this).val();
                var end = val.length;

                $(this).val( val.substr(0, curr) + '<br>' + val.substr(curr, end));
            }

        })
    });

    function getCaret(el) { 
        if (el.selectionStart) { 
            return el.selectionStart; 
        }
        else if (document.selection) { 
            el.focus(); 

            var r = document.selection.createRange(); 
            if (r == null) { 
                return 0; 
            } 

            var re = el.createTextRange(), 
            rc = re.duplicate(); 
            re.moveToBookmark(r.getBookmark()); 
            rc.setEndPoint('EndToStart', re); 

            return rc.text.length; 
        }  
        return 0; 
    }

</script>
<div id="content">
    <textarea id="txt" cols="50" rows="10"></textarea>
</div>

【讨论】:

    【解决方案3】:

    你可以这样做:

    函数 createBr(e) { 如果(e.keyCode == 13){ document.createElement("BR"); //用它做你想做的事 } }

    希望对你有帮助

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2013-08-09
      • 2019-07-02
      • 1970-01-01
      • 1970-01-01
      • 2011-07-24
      • 1970-01-01
      • 1970-01-01
      • 2019-05-25
      相关资源
      最近更新 更多