Question

我正在尝试添加一个javascript监听器：

1.在文本字段（#articleField）中监听文本更改 2.将该文本转换为子弹 3.将新slug放入另一个文本字段（#slugField）

我正在使用Rails 4 我从this question:

拉出了slug逻辑

查看

  <%= f.input :article, label: 'Article', required: true, focus: true, id: 'articleField' %>
  <%= f.input :slug, label: 'Slug', required: true, focus: true, id: 'slugField' %>
  <%= f.button :submit, value: 'SAVE CHANGES' %>'



 <script>
$('#articleField').blur(  
   function(){    
      var article = $(this).text();
      var slug = article.trim().toLowerCase().replace(" ", "_");
      $(this).prop('id', slug);
      $(slug).append(#slugField); <---this is where I'm going off the road
    } 
  )
// </script>

我是JS的新手，我在如何使用函数中创建的slug附加#slugField文本框时遇到问题。

Answer 1

首先，您的javascript代码是否在document ready指令中？

<script type="text/javascript">
  $(function() {
    // Your code should be here
  });
</script>

其次，您可以使用jQuery val方法在text_field内设置文字。

$('#articleField').blur(function() {
  var article = $(this).val();
  var slug = article.trim().toLowerCase().replace(" ", "_");
  $("#slugField").val(slug);
});

Answer 2

为了创建slug，我使用了一个jquery插件，它可以很好地发挥作用，来自http://pid.github.io/speakingurl/

现在我的代码，我得到了更改和keyup方法的slug，根据输入值获取slug并将其分配给其他字段。

$(document).on('keyup change','#username', function(){
    var slug = getSlug($(this).val());
    $('#user-slug').val(slug);
    //looking for optimization
    delete slug;
});

希望你明白。

转换为slug后，Javascript侦听器将第一个text_field中的文本添加到第二个text_field

2 个答案: