接受/触发带有 HTML/JS 的图像键盘 (GIF)答案

【问题标题】：Accept/trigger image keyboard (GIFs) with HTML/JS接受/触发带有 HTML/JS 的图像键盘 (GIF)
【发布时间】：2019-12-20 22:42:48
【问题描述】：

我们如何接受/触发带有普通文本输入的图像键盘（如 Android 上的 GIF 键盘）？

HTML：

<input type="text">

当我尝试插入 gif 时，我得到了

无法在此处输入此内容。

所以问题是我们如何触发用户插入一些 GIF 图片？

喜欢...

<input type="text" accept="..." oninput="...">

这可能吗？

资源： https://developer.android.com/guide/topics/text/image-keyboard

【问题讨论】：

您不能将图像放在文本字段中。这将需要一个<input type="file"> 和一个<img> 标记来显示它。你可能会通过制作一个伪元素而侥幸
您需要<textarea/> 或Content Editable Element 才能将文本与图像混合。
这将取决于浏览器来实现这样的事情。你有没有遇到过可以运行的网站？
@Kaiido 不，从未见过；）

标签： javascript html image gif html-input

【解决方案1】：

我们不能在 HTML 中使用 GIF 键盘，因为对于 GIF 键盘，我们需要一些本机代码。但是我们可以在支持移动原生端的javascript框架上使用。

在React Native（javascript移动框架）我们可以使用react-native-image-keyboard包来获取这个键盘android和ios

【讨论】：

【解决方案2】：

是的，这是可能的。要获取图片，您需要使用<input type='file'>。

function displayImg() {
    var file = document.getElementById('file').files[0];
    //call the filereader
    var reader  = new FileReader();
    reader.onload = function(e)  {
        //create the img tag
        var image = document.createElement("img");
        //get the image
        image.src = e.target.result;
        //resize the image
        image.style.width = '100%';
        image.style.height = '100%';
        document.body.appendChild(image);
     }
     reader.readAsDataURL(file);
}

<body>
      <input type=file name=filename id=file>
     <button type=button onclick='displayImg()'>Display</button>
</body>

【讨论】：

不，抱歉。我在粘贴 gif 时要求 <input type="text">