Question

检查下面的代码。现在，如果我在pTitle中放入一些文本，当我按下键盘上的空格键时，它将在我键入的单词之间产生-克隆破折号。但是问题出在我按下下一个单词之后，-和-之间的破折号也删除了单词，这也使我不需要了自动空格。现在告诉我如何解决-自动删除问题？有什么建议吗？另外，还附有fiddle link用于快速检查

HTML：

pTitle: <input type="text" id='pTitle' name="fname"><br>
<br>
pUrl: <input type="text" id='pUrl' name="lname"><br>

Jq代码：

$('#pTitle').keyup(function (e) {
            if (e.keyCode === 32) {
                $('#pUrl').val($(this).val()+'-');
            } else {
                $('#pUrl').val($(this).val());
            }

            var charNumber = e.currentTarget.value.length;
            if (charNumber === 0) {
                $('#pUrl').val('#');
            }
        });

Answer 1

您可以使用.replace（）将空格换成连字符。三元方程式允许url为输入值== 0的长度的“＃”（例如，如果您输入了文本，然后删除了所有字符），或者连字符，如果输入中包含文本。

$('#pTitle').keyup(function (e) {
  var newVal = $(this).val();
  newVal.length == 0 
  ? $('#pUrl').val('#')
  : $('#pUrl').val(newVal.replace(/ /g,'-'));
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
pTitle: <input type="text" id='pTitle' name="fname"><br>
<br>
pUrl: <input type="text" id='pUrl' name="lname"><br>

Answer 2

上面的 @gavgrif 提供了一个不错的解决方案。如果您想避免使用正则表达式，则可以使用以下非正则表达式解决方案

$('#pTitle').keyup(function (e) {
  var val = $(this).val();
  val.length==0 
  ? $('#pUrl').val('#')
  : $('#pUrl').val(val.split(" ").join("-"));
 })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
pTitle: <input type="text" id='pTitle' name="fname"><br>
<br>
pUrl: <input type="text" id='pUrl' name="lname"><br>

Answer 3

您可以简单地从pTitle输入中读取文本，并用连字符'-'代替空格，并将结果设置为pUrl输入中

$('#pTitle').keyup(function (e) {     
       $('#pUrl').val($(this).val().replace(/ /g,'-'));

       var charNumber = e.currentTarget.value.length;
       if (charNumber === 0) {
           $('#pUrl').val('#');
       }
  });

用破折号将文本转换为url

3 个答案: