为啥当我选择第二个输入框时音译不起作用？

Posted 2023-02-22

【中文标题】为啥当我选择第二个输入框时音译不起作用？

【英文标题】：Why transliteration in not working when I am selection the second input box?为什么当我选择第二个输入框时音译不起作用？

【发布时间】：2018-09-28 06:18:30

【问题描述】：

<div class="row" v-for="(book, index) in Subsequent" :key="index">
    <div class="col-md-8">
        <div class="form-group label-floating">
            <label class="control-label"> Details</label>
            <input type="text" class="form-control" v-model="book.seizuredetails" id="transliterateTextarea2">
        </div>
    </div>
</div>
<a @click="addNewRow">Add Another</a>
</div>

我在第一个输入框中得到音译。 （第一种情况没问题）

所以，当我点击添加另一个时，我可以有一个新的输入框。但在那个音译是行不通的。

我的音译脚本是

  <script type="text/javascript">

      // Load the Google Transliterate API
      google.load("elements", "1", 
          packages: "transliteration"
      );

      function onLoad() 
          var options = 
              sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
              destinationLanguage: [google.elements.transliteration.LanguageCode.MALAYALAM],
              shortcutKey: 'ctrl+g',
              transliterationEnabled: true
          ;

          // Create an instance on TransliterationControl with the required
          // options.
          var control = new google.elements.transliteration.TransliterationControl(options);

          // Enable transliteration in the textbox with id
          // 'transliterateTextarea'.
          var ids = [ "transliterateTextarea", "transliterateTextarea1", "transliterateTextarea2" ];
          control.makeTransliteratable(ids);
      
      google.setOnLoadCallback(onLoad);
  </script>

那么，当点击添加另一个时，我怎样才能给那个输入区域一个新的音译ID。

请帮我解决一下。

【问题讨论】：

似乎脚本没有看到您添加任何内容。我假设您需要委托或重新初始化脚本

先生，一切正常。当我单击添加另一个时，我可以添加一行。但是此时马拉雅拉姆语写作并不成熟。这是唯一的问题

您只执行一次var ids = [ "transliterateTextarea", "transliterateTextarea1", "transliterateTextarea2" ];。在您单击添加之前 - 我假设添加将插入新的 DOM 对象

怎么办，先生，请帮忙

我不知道。我还没用过vue，也没有音译。看看音译文档

【参考方案1】：

基本上你会得到makeTransliteratable 代码并将它放在一个方法中。之后，您可以在任何要使其可音译的输入上调用此类方法。

不过也有一些陷阱。

第一个是如何判断谷歌音译是否加载。我在方法中使用了 Promise (window.googleIsloaded) 和 await window.googleIsLoaded;，以保证它仅在加载 google 之后执行。

第二个陷阱更糟糕：在音译时，google 直接设置<input> 的值，并且在执行此操作时不会发出任何事件。由于没有事件，Vue 无法更新 v-model 属性。为了克服这个问题，我创建了一个Proxy，它拦截对输入的任何调用，并在 google 直接设置值时发出一个输入事件，这允许 Vue 选择更改。缺点是Proxy API 在 IE 中不可用。

JSFiddle demo here.

---

更新：

好的，我想出了一个解决方法来在所有 IE 版本的 Vue 支持中工作，并且还能够将它变成 Vue custom directive。

因此，您只需将v-transliterate="options" 添加到<input> 或<textarea>，即options 您的对象或属性，其中包含该特定<input>/<textarea> 的音译配置。示例：

<input type="text" v-model="somevar" v-transliterate="options">

Demo JSFiddle here.代码：

<script src="https://unpkg.com/vue"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
  // Load the Google Transliterate API
  google.load("elements", "1", 
    packages: "transliteration"
  );

  Vue.directive('transliterate', function (el, binding) 
      var control = new google.elements.transliteration.TransliterationControl(binding.value);
      // a getter for each property google transliterate reads and a setter for each it modifies
      var inputOrTextareaProxy = 
          get getAttribute()  return el.getAttribute.bind(el); ,
          get addEventListener()  return el.addEventListener.bind(el); ,
          get blur()  return el.blur.bind(el); ,
          get focus()  return el.focus.bind(el); ,
          get tagName()  return el.tagName; ,
          get type()  return el.type; ,
          get id()  return el.id; ,
          get style()  return el.style; ,
          get selectionStart()  return el.selectionStart; ,
          get selectionEnd()  return el.selectionEnd; ,
          get value()  return el.value; ,
          set value(v)  el.value = v; el.dispatchEvent(new CustomEvent('input')); ,
          get nodeType()  return el.nodeType; ,
          get ownerDocument()  return el.ownerDocument; ,
          get scrollTop()  return el.scrollTop; ,
          set scrollTop(v)  el.scrollTop = v; 
      ;
      control.makeTransliteratable([inputOrTextareaProxy]);
  );
</script>

<div id="app">
  <div class="row" v-for="(book, index) in Subsequent" :key="index">
    <div class="col-md-8">
      <div class="form-group label-floating">
        <label class="control-label"> Details</label>
        <input type="text" class="form-control" v-model="book.seizuredetails" v-transliterate="options"> (Type "World." with the dot!)  book.seizuredetails 
      </div>
    </div>
  </div>
  <a @click="addNewRow">Add Another</a>
</div>

new Vue(
  el: '#app',
  data: 
    message: 'Hello Vue.js!',
    Subsequent: [
        seizuredetails: ''
    ],
    options: 
      sourceLanguage: google.elements.transliteration.LanguageCode.ENGLISH,
      destinationLanguage: [google.elements.transliteration.LanguageCode.MALAYALAM],
      shortcutKey: 'ctrl+g',
      transliterationEnabled: true
    
  ,
  methods: 
    addNewRow: function() 
        this.Subsequent.push(seizuredetails: '')
    
  
)

【讨论】：

先生，我用同样的方法进行了检查，但出现以下控制台错误。未捕获的 TypeError：无法在“窗口”上执行“getComputedStyle”：参数 1 不是“元素”类型。在 Go (transliteration.I.js:53) 在 tp (transliteration.I.js:64) 在 Dp (transliteration.I.js:70) 在 Kp.Q.Me (transliteration.I.js:185) 在 bx .Q.$i (transliteration.I.js:283) at Xw.Q.Ad (transliteration.I.js:279) at bx.handleEvent (transliteration.I.js:285) at cr.handleEvent (transliteration.I .js:197) 在 Up.handleEvent (transliteration.I.js:188)