Javascript监听器将文本从第一个text_field添加到第二个text_field后转换为slug

Javascript listener add text from first text_field to second text_field after converting to slug

本文关键字：field text 第二个 转换 slug 添加 第一个 Javascript 监听器 文本      更新时间：2023-09-26

我正在尝试添加一个javascript侦听器:

1. 监听文本字段(#articleField)
中的文本更改2. 将该文本转换为
3.将新段插入到另一个文本字段(#slugField)

我正在使用Rails 4我正在从这个问题中提取段塞逻辑:

视图

  <%= 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的新手，我在如何将#slugField文本框与函数中创建的slug附加在一起时遇到了麻烦。

首先，是你的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);
});

我使用了一个jquery插件，可以很好地使用speakingurl，从http://pid.github.io/speakingurl/

现在我的代码中，我在change和keyup方法上获得了slug，根据输入值获得了slug并将其分配给了其他字段

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

希望你能理解

相关文章：