jquery.mentionsInput 在移动设备上不起作用答案

【问题标题】：jquery.mentionsInput not working on mobilejquery.mentionsInput 在移动设备上不起作用
【发布时间】：2016-07-17 09:06:28
【问题描述】：

我在我的项目中使用 jquery.mentionsInput。该插件在台式机上运行良好，但在移动设备上无法运行。这是我的代码。 alert() 用于测试检查函数是否工作。

$('textarea.mention').mentionsInput({

    onDataRequest:function (mode, query, callback) {
      alert("To test on mobile"); 
      searchVal = query;

      $.ajax({
        type: "GET",
        dataType: "json",
        url: rootPath()+"user/tagFriends/"+searchVal,

        success: function(data){
            data = _.filter(data, function(item) { return item.name.toLowerCase().indexOf(query.toLowerCase()) > - 1 });
            callback.call(this, data);
        }

        });


    }
  });

这是插件link。该插件也不适用于移动设备。提前致谢。对不起我的英语不好。

【问题讨论】：

标签： javascript jquery mobile

【解决方案1】：

在您的文件 jquery.mentionsInput.js 中，您可以像这样修改您的 2 个函数 onInputBoxInput() 和 onInputBoxKeyPress()

function onInputBoxInput(e) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {//certain versions of android mobile browser don't trigger           the keypress event.
if(e.keyCode !== KEY.BACKSPACE) {
 var typedValue = String.fromCharCode(e.which || e.keyCode); //Takes the    string that represent this CharCode
inputBuffer.push(typedValue); //Push the value pressed into inputBuffer
}
    }
updateValues();
updateMentionsCollection();

var triggerCharIndex = _.lastIndexOf(inputBuffer, settings.triggerChar); //Returns the last match of the triggerChar in the inputBuffer
if (triggerCharIndex > -1) { //If the triggerChar is present in the inputBuffer array
    currentDataQuery = inputBuffer.slice(triggerCharIndex + 1).join(''); //Gets the currentDataQuery
    currentDataQuery = utils.rtrim(currentDataQuery); //Deletes the whitespaces
    _.defer(_.bind(doSearch, this, currentDataQuery)); //Invoking the function doSearch ( Bind the function to this)
}
}

//Takes the keypress event
function onInputBoxKeyPress(e) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(!isAndroid) {
    if(e.keyCode !== KEY.BACKSPACE) { //If the key pressed is not the backspace
        var typedValue = String.fromCharCode(e.which || e.keyCode); //Takes the string that represent this CharCode
        inputBuffer.push(typedValue); //Push the value pressed into inputBuffer
    }
}
}

在你的 index.html 中

在页面底部添加此代码

<script>


var sendBoxElem = $('textarea.mention');
sendBoxElem.bind("input", function(e) {
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
var char = this.value.charCodeAt(this.value.length - 1);
//$scope.data = char;
if(e.keyCode === undefined){
e.keyCode = char;
}
return true;
}
});

</script>

如果可行，请通知我

【讨论】：

谢谢，但我已经这样做了，现在正忙于另一个项目。如果我将来使用它，我会通知你
该解决方案仅在 @ 位于文本末尾时才有效。对吗？

【解决方案2】：

这与众所周知的 Android Chrome 错误有关： https://bugs.chromium.org/p/chromium/issues/detail?id=118639

simo9900 的答案通常是正确的，但对我不起作用。

只需在 jquery.mentionsInput.js 的 onInputBoxInput 函数顶部添加此代码：

    function onInputBoxInput(e) {
        if( navigator.userAgent.toLowerCase().indexOf("android") > -1) {
            e.keyCode = e.target.value.charCodeAt(e.target.selectionStart-1);
            onInputBoxKeyPress(e);
        }
        ...
    }

【讨论】：