使用 Javascript 更改提交按钮值 - 包括换行符答案

【问题标题】：Change submit button value with Javascript - including line break使用 Javascript 更改提交按钮值 - 包括换行符
【发布时间】：2015-10-29 09:58:19
【问题描述】：

当我在 HTML 中定义提交按钮的值时，可能会导致换行：

<script>
    function change_value() {
        if (document.getElementById('click_me').checked) {
            document.getElementById('next').value='Next';
        } else {
            document.getElementById('next').value='Text with&#13;&#10;line break';
        }
    }
</script>

<form>
    <input id="click_me" type="checkbox" name="click_this" value="1" onclick="change_value()">
    <input id="next" type="submit" value="Text with&#13;&#10;line break">
</form>

在单击复选框之前，提交按钮如下所示：

但是当我使用 JavaScript 设置该值时，换行符显示为文本：

如何使用 JavaScript 插入带有换行符的文本？

注意。

这只需要在最新版本的 Firefox 中工作。

【问题讨论】：

标签： javascript submit-button

【解决方案1】：

js中的换行符是\n，在设置value属性的时候要用到

function change_value() {
  if (document.getElementById('click_me').checked) {
    document.getElementById('next').value = 'Next';
  } else {
    document.getElementById('next').value = 'Text with\nline break';
  }
}

<input id="click_me" type="checkbox" name="click_this" value="1" onclick="change_value()">
<input id="next" type="submit" value="Text with&#13;&#10;line break">

【讨论】：

【解决方案2】：

试试看：

 function change_value() {
      if (document.getElementById('click_me').checked) {
        document.getElementById('next').value = 'Next';
      } else {
        document.getElementById('next').value = 'Text with \n line break';
      }
    }

【讨论】：

【解决方案3】：

More details about Text formatting on this link

  document.getElementById('click_me').value='Text with \n line break'

或

document.getElementById('next').value=`Text with 
  line break`;

【讨论】：

由于某种原因，您的第二个示例不适用于我（在 Firefox 中的 OS X 上）。如果我真的将代码换成新行，脚本将完全停止工作——即使插入“Next”也不再有效，控制台也不会显示任何错误。