表单输入文本模式中的可选字符

Posted 2023-03-11

【中文标题】表单输入文本模式中的可选字符

【英文标题】：Optional Character in Form Input Text Pattern

【发布时间】：2020-05-30 14:16:29

【问题描述】：

抱歉，如果在其他地方回答了这个问题，请指出我的方向。

使用 Node 和 EJS，我有一个用于捕获啤酒厂名称的表单字段，这是通过 API 提供的...

<label>Brewery</label><br>
<input id="formBreweryName" class="form-control" type="text" name="breweryname" ><br>
<label>Beer Name</label><br>
<input id="formBeerName" class="form-control" type="text" name="beername" >

这是在 <ul> 中显示啤酒厂名称并包含用于填充表单的 onclick 处理程序的 ejs...

 <ul>
    <% BeerList.forEach(function(objsofbeer) %>
       <li>
          <a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
          <span><%= objsofbeer.brewery.brewery_name %></span><br>
          <span><%= objsofbeer.beer.beer_name %></span><br>      
          </a>
       </li>
</ul>

还有用于将啤酒厂名称移植到表单的 javascript...

var addFormText = function( breweryName, beerName) 
    document.getElementById('formBreweryName').value = breweryName;
    document.getElementById('formBeerName').value = beerName;
      

API 向我传递了一个啤酒厂名称，像这样...

brewery_name: 'Reuben\'s Brews',

我在上面的代码中添加了啤酒的名称，以便更好地衡量。

问题

当啤酒厂名称中有撇号时，啤酒厂名称不会显示在相应的表单字段中，但啤酒厂名称会显示在该部分中。

对于大多数示例，啤酒厂名称没有撇号。因此 API 啤酒厂名称按预期显示在表单字段中。但如上例所示，啤酒厂名称带有撇号，因此该名称不会显示在我的表单字段中。

我希望有一个非 JavaScript 的模式属性解决方案可以让我在文本中选择性地包含撇号（或其他无法预见的特殊字符）。如果没有，那么我愿意接受 javascript 或其他建议。

我看到了很多“使用模式来排除某些字符”或“使用模式来强制用户只使用这个给定的文本模式”的例子。但我没有看到任何允许可选包含像撇号这样的字符（或任何其他可选包含特殊字符）。

如果这似乎是我的表单输入字段之外的问题，我很乐意分享更多我的编码。

【问题讨论】：

请展示您如何设置输入。你是在使用 JQuery，还是 Angular 或什么？

感谢 Francesco，我添加了我认为您需要的所有代码，如果您需要更多，请告诉我。

【参考方案1】：

不确定，但我认为问题在于您需要在重音之前使用双转义字符，一个用于服务器上的 ejs，一个用于浏览器上的 js。您可以尝试使用 EJS doesn't escape characters)。 抱歉我没用过ejs...其他尝试，很丑...：

<ul>
<% BeerList.forEach(function(objsofbeer) %>
<%   objsofbeer.brewery.brewery_name = objsofbeer.brewery.brewery_name.replace("'","\\'"); %>
<%   objsofbeer.beer.beer_name = objsofbeer.beer.beer_name.replace("'","\\'"); %>
   <li>
      <a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
      <span><%= objsofbeer.brewery.brewery_name %></span><br>
      <span><%= objsofbeer.beer.beer_name %></span><br>      
      </a>
   </li>

或尝试使用 ` 字符代替 " 或 '

【讨论】：

感谢 Francesco，我一直在外地，所以没有机会尝试这个。我会尽快跟进。谢谢！

嗨，Francesco，我已经尝试了您上面的所有建议（我希望

的输出是什么？

它抛出错误Cannot read property 'replace' of undefined，当我在代码编辑器<a onclick="addFormText( '<%= objsofbeer.beer.brewery_name.replace('\'','\\\'') %>','<%- objsofbeer.beer.beer_name %>' 中查看代码时，它在第一个转义反斜杠和随后的ejs 标记（如%>）下显示红色下划线错误和<%。因此，即使在我运行此代码然后运行它确认错误之前，它也会在编辑器中显示错误。

我编辑了答案...如果这不起作用，请尝试在渲染 ejs 之前对 BeerList 对象执行相同的操作。