Question

如何删除空格。我使用onkeyup来显示div中的输出

由于

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function() {
  document.getElementById('printchatbox').innerHTML = inputBox.value;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Title Page</label>
  <input type="text" id="chatinput" class="form-control" required="">
</div>
<div class="form-group">
  <div><b>Permalink: </b>http://doamin.com/<span id="printchatbox" class="cl-blue"></span></div>
</div>

Answer 1

您可以使用replace替换空格。

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function() {
  document.getElementById('printchatbox').innerHTML = inputBox.value.replace(' ', '');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Title Page</label>
  <input type="text" id="chatinput" class="form-control" required="">
</div>
<div class="form-group">
  <div><b>Permalink: </b>http://doamin.com/<span id="printchatbox" class="cl-blue"></span></div>
</div>

注：

在看到建议的编辑后，我必须注意这是 NOT 正确答案，因为它只处理一个空格。如果字符串中有多个空格，则只删除第一个空格。正如编辑所建议的那样，正确的方法是使用正则表达式。在这种情况下，replace将替换所有空格

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function() {
  document.getElementById('printchatbox').innerHTML = inputBox.value.replace(/\s/g, '');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Title Page</label>
  <input type="text" id="chatinput" class="form-control" required="">
</div>
<div class="form-group">
  <div><b>Permalink: </b>http://doamin.com/<span id="printchatbox" class="cl-blue"></span></div>
</div>

Answer 2

使用replace

  document.getElementById('printchatbox').innerHTML = inputBox.value.replace(/\s/g,"");

<强>演示

＆＃13;

var inputBox = document.getElementById('chatinput');

inputBox.onkeyup = function() {
  document.getElementById('printchatbox').innerHTML = inputBox.value.replace(/\s/g, "");
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label>Title Page</label>
  <input type="text" id="chatinput" class="form-control" required="">
</div>
<div class="form-group">
  <div><b>Permalink: </b>http://doamin.com/<span id="printchatbox" class="cl-blue"></span></div>
</div>

＆＃13;

如何使用JavaScript删除空格？

2 个答案: