【问题标题】: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

【问题讨论】:

  • 您不能将图像放在文本字段中。这将需要一个&lt;input type="file"&gt; 和一个&lt;img&gt; 标记来显示它。你可能会通过制作一个伪元素而侥幸
  • 您需要&lt;textarea/&gt;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】:

    是的,这是可能的。要获取图片,您需要使用&lt;input type='file'&gt;

    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 时要求 &lt;input type="text"&gt;
    猜你喜欢
    • 1970-01-01
    • 2021-06-24
    • 1970-01-01
    • 1970-01-01
    • 2022-01-11
    • 2015-03-07
    • 1970-01-01
    • 1970-01-01
    • 2017-02-22
    相关资源
    最近更新 更多