Question

我在我的项目中使用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。该插件也无法在移动设备上运行。提前致谢。抱歉我的英语不好。

Answer 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>

请告知我这是否有效

Answer 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);
        }
        ...
    }

jquery.mentionsInput无法在移动设备上运行

2 个答案: