草庐IT

javascript - 不允许在 textarea 中换行

coder 2023-04-23 原文

使用 jQuery 我如何不允许插入新行(通过按 Enter 或在文本中复制)- 在半伪代码中...

$('textarea').keydown(function(){
 $(this).remove_new_lines();
});

谢谢!

编辑:

会像下面这样粗暴还是有更好的方法？

function removeNL(s){ 
  return s.replace(/[\n\r\t]/g,); 
}

$('textarea').keydown(function(){
 $(this).val(removeNL($(this).val));
});

最佳答案

有两种方法可以做到这一点:在输入时检查每个字符，如果您不希望它显示，则返回 false，或者在每次更改/keyup 时检查全部内容。虽然前者的性能更高，但在用户粘贴包含不需要字符的内容的情况下它不起作用。出于这个原因，我推荐后一种方法，像这样(这将不允许所有垂直空格):

使用 jQuery:

$('textarea').on('keyup', function(){
  $(this).val($(this).val().replace(/[\r\n\v]+/g, ''));
});

或者使用纯 JavaScript (ES2015/ES6):

constrainInput = (event) => { 
  event.target.value = event.target.value.replace(/[\r\n\v]+/g, '')
}

document.querySelectorAll('textarea').forEach(el => {
  el.addEventListener('keyup', constrainInput)
})

另一种方法是等到焦点离开文本区域，然后应用转换。这避免了在使用合成的、有条件的事件键盘控件的操作系统上出现的卡顿行为。但是，用户在离开该字段之前会看到换行符，因此请注意。为此，只需将上述事件监听器更改为监听 blur 而不是 keyup。

如果您使用的是 React，那么您已经完成了它，因为它避免了移动浏览器的问题，同时让您可以使用受控组件管理值的变化:

class TextArea extends React.PureComponent {
  state = {
    value: ""
  };

  handleChange = event => {
    const value = event.target.value.replace(/[\r\n\v]+/g, "");
    this.setState({ value });
  };

  render() {
    return <textarea onChange={this.handleChange} value={this.state.value} />;
  }
}

关于javascript - 不允许在 textarea 中换行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4959501/

javascripttextareacodesectionvaluejqueryformatting

有关javascript - 不允许在 textarea 中换行的更多相关文章

  1. ruby-on-rails - RSpec:避免使用允许接收的任何实例 - 2

    我正在处理旧代码的一部分。beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)endRubocop错误如下:Avoidstubbingusing'allow_any_instance_of'我读到了RuboCop::RSpec:AnyInstance我试着像下面那样改变它。由此beforedoallow_any_instance_of(SportRateManager).toreceive(:create).and_return(true)end对此:let(:sport_

  2. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  3. ruby - 允许主机名包含下划线的 URI.parse 的替代方法 - 2

    我正在使用DMOZ的listofurltopics，其中包含一些具有包含下划线的主机名的url。例如:608609TheOuterHeaven610InformationandimagegalleryofMcFarlane'sactionfiguresforTrigun,Akira,TenchiMuyoandotherJapaneseSci-Fianimations.611Top/Arts/Animation/Anime/Collectibles/Models_and_Figures/Action_Figures612虽然此url可以在网络浏览器中使用(或者至少在我的浏览器中可以使用:

  4. ruby - 代码块中的 Markdown 换行符 - 2

    使用Redcarpet，当我在Markdown中包含类似以下内容时，它不考虑任何换行符或缩进。我在行尾尝试了两个空格。代码之间的额外行。似乎没有任何效果。```xml3```我明白了:3这里是Redcarpet设置:Redcarpet::Markdown.new(Redcarpet::Render::HTML,:autolink=>true,:space_after_headers=>true,:fenced_code_blocks=>true,:no_intra_emphasis=>true,:lax_html_blocks=>true)我需要做什么才能正确换行并保留缩进，就像这里或

  5. ruby - 为什么允许在 Ruby 类之外定义全局方法？ - 2

    我读过这个:Let’sstartwithasimpleRubyprogram.We’llwriteamethodthatreturnsacheery,personalizedgreeting.defsay_goodnight(name)result="Goodnight,"+namereturnresultend我的理解是，方法是定义在类中的函数或子程序，可以关联到类(类方法)或对象(实例方法)。那么，如果它不是在类中定义的，怎么可能是方法呢？ 最佳答案 当你在Ruby中以这种方式在全局范围内定义一个函数时，它在技术上变成了Obje

  6. ruby - 在 Mechanize 中使用 JavaScript 单击链接 - 2

    我有这个:AccountSummary我想单击该链接，但在使用link_to时出现错误。我试过:bot.click(page.link_with(:href=>/menu_home/))bot.click(page.link_with(:class=>'top_level_active'))bot.click(page.link_with(:href=>/AccountSummary/))我得到的错误是:NoMethodError:nil:NilClass的未定义方法“[]” 最佳答案 那是一个javascript链接。Mechan

  7. Ruby 无法检测字符串中的换行符 - 2

    我有以下字符串，我想检测那里的换行符。但是Ruby的字符串方法include?检测不到它。我正在运行Ruby1.9.2p290。我哪里出错了？"/'ædres/\nYour".include?('\n')=>false 最佳答案 \n需要在双引号内，否则无法转义。>>"\n".include?'\n'=>false>>"\n".include?"\n"=>true 关于Ruby无法检测字符串中的换行符，我们在StackOverflow上找到一个类似的问题： h

  8. javascript - jQuery 的 jquery-1.10.2.min.map 正在触发 404(未找到) - 2

    我看到有关未找到文件min.map的错误消息:GETjQuery'sjquery-1.10.2.min.mapistriggeringa404(NotFound)截图这是从哪里来的？ 最佳答案 如果ChromeDevTools报告.map文件的404(可能是jquery-1.10.2.min.map、jquery.min.map或jquery-2.0.3.min.map，但任何事情都可能发生)首先要知道的是，这仅在使用DevTools时才会请求。您的用户不会遇到此404。现在您可以修复此问题或禁用sourcemap功能。修复:获取文

  9. ruby Mechanize : multiline value for textarea gets merged - 2

    编辑:经过进一步测试，问题似乎是站点特定的，理论上应该可以正常工作。本应位于多行的Textarea值正在一行中全部提交。textarea_values="value1\nvalue2"form=page.form_with(:id=>'form_id_here')form['my_textarea']=textarea_valuessubmit=form.button_with(:value=>'Submit')form.click_button(submit)提交的值是value1\nvalue2而不是预期的多行。有没有我可以尝试的另一种添加表单值的方法？

  10. ruby - 为什么 ruby​​ 中的变量前缀允许在方法调用中省略括号？ - 2

    在DavidFlanagan的TheRubyProgrammingLanguage中；松本幸弘theystatethatthevariableprefixes($,@,@@)areonepricewepayforbeingabletoomitparenthesesaroundmethodinvocations.谁可以给我解释一下这个？ 最佳答案 这是我不成熟的意见。如果我错了，请纠正我。假设实例变量没有@前缀，那么我们如何声明一个实例变量？classMyClassdefinitialize#Herefooisaninstanceva

随机推荐