JSP生成的<input>标签添加form-control类后value值不显示问题

这问题我之前做项目时也碰到过，大概率是Bootstrap的form-control类和你的自定义样式、JSP渲染逻辑有冲突，咱们一步步来排查解决：

• 第一步：确认JSP变量是否正确渲染到HTML
  先右键页面查看源代码，找到生成的input标签，看看value属性里有没有正确的CIG-VC值：

  • 如果源代码里value是空的或者不对，那问题出在JSP变量传递上，检查你的后端代码是否把CIG-VC正确赋值给了对应的变量（比如req_hallname对应的属性），确保JSP能拿到这个值。
  • 如果源代码里value是对的，但页面上看不到，那就是样式或者JS的问题，继续往下排查。

• 第二步：解决样式优先级冲突
  Bootstrap的form-control类会重置输入框的默认样式，可能你的行内样式优先级不够，导致文字被覆盖或者和背景色重合（虽然你设置了color: blue，但有可能被Bootstrap的样式覆盖）。可以试试这两种方法：

  1. 给行内样式加!important提高优先级：

     <input type="text" style="font-weight:bold; background-color: orange !important; color: blue !important;" name="req_hallname" class="form-control" title="Conference Hall Requested" value="<%= yourVariableName %>">
     

  2. 改用自定义CSS类，把自定义样式和form-control结合：

     <style>
       .hall-request-input {
         font-weight: bold;
         background-color: orange;
         color: blue;
       }
     </style>
     <input type="text" class="form-control hall-request-input" name="req_hallname" title="Conference Hall Requested" value="${hallName}">
     

     这种方式比行内样式更易维护，优先级也能覆盖默认的form-control样式。

• 第三步：检查是否有JavaScript清空了输入框
  有些页面会用JS初始化表单（比如Bootstrap的表单插件、自定义的表单重置逻辑），可能会把form-control类的输入框值清空。你可以打开浏览器控制台，输入以下命令查看当前输入框的实际值：

  document.querySelector('input[name="req_hallname"]').value
  

  如果控制台返回的是空值，但源代码里有值，那就是JS在页面加载后修改了值。找到对应的JS代码，调整逻辑避免清空这个输入框，或者在JS执行完成后重新设置值。

• 第四步：转义特殊字符（如果有）
  如果你的JSP变量包含空格、换行或者特殊字符，可能会导致HTML解析异常，value属性被截断。可以用JSTL的fn:escapeXml函数转义：
  首先引入JSTL标签库：

  <%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
  

  然后修改input的value：

  <input type="text" class="form-control hall-request-input" name="req_hallname" title="Conference Hall Requested" value="${fn:escapeXml(hallName)}">
  

按照这个步骤排查，应该能解决你的问题。

内容的提问来源于stack exchange，提问作者Raky