在包含图像的div内的向下箭头键光标-Ondownarrowkeycursorgoinginsideadivcontainingimage

作者：手机用户2602883245 | 来源：互联网 | 2023-09-11 12:05

IammodifyingbootstrapbasedHTMLeditor.Ihavedoneimageuploadingpart.Inimageuploading,Ia

I am modifying bootstrap based HTML editor. I have done image uploading part.In image uploading, I am creating an image inside a div.

我正在修改基于bootstrap的HTML编辑器。我已经完成了图像上传部分。在图像上传中，我在div中创建了一个图像。

I want image to be resizeable hence,

我希望图像可以调整大小，因此，

element.style {
   border: 1px solid;
   padding: 10px;
   width: 300px;
   resize: both;
   overflow: auto;
  }

But the issue is when I am hitting a down key cursor is going inside a div containing an image (instead of below a div).

但问题是当我按下一个向下键的光标进入包含图像的div（而不是在div下面）时。

so what changes should I do in order to bring cursor below a div on pressing key down?

那么我应该做什么改变才能在按下键的同时将光标移到div下面？

2 个解决方案

#1

Demo: http://jsfiddle.net/u37cxxbh/2/

演示：http：//jsfiddle.net/u37cxxbh/2/

Make div cOntenteditable="false" and add textarea element next to image. As in example above.

使div cOntenteditable=“false”并在图像旁边添加textarea元素。如上例所示。

#2

Simply adding

简单地添加

cOntenteditable="false"

to the div containing the image seems to solve the problem.

包含图像的div似乎解决了问题。

#editor {
  overflow: scroll;
  max-height: 250px;
  height: 250px;
  background-color: white;
  border-collapse: separate;
  border: 1px solid rgb(204, 204, 204);
  padding: 4px;
  box-sizing: content-box;
  -webkit-box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  box-shadow: rgba(0, 0, 0, 0.0745098) 0px 1px 1px 0px inset;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  border-top-left-radius: 3px;
  overflow: scroll;
  outline: none;
}
div {
  display: block;
}

First line
  
    //after clicking down arrow key cursor going inside an image div

    
      
    

  
  
    

  
  Last line

推荐阅读

web
秒建一个后台管理系统？用这5个开源免费的Java项目就够了

秒建一个后台管理系统？用这5个开源免费的Java项目就够了 ... [详细]

蜡笔小新 2024-11-12 03:21:33
web
CTF竞赛中文件上传技巧与安全绕过方法深入解析

CTF竞赛中文件上传技巧与安全绕过方法深入解析 ... [详细]

蜡笔小新 2024-11-07 15:41:52
web
Android 图片上传工具类优化方案（第三部分）

本文介绍了在 Android 平台上的图片上传工具类优化方案，重点讨论了如何通过设置 `MultipartEntity` 来实现图片的高效上传。具体实现中，通过自定义 `UserUploadServiceImpl` 类，详细展示了如何构建和发送包含图片数据的 HTTP 请求。此外，还探讨了如何处理上传过程中的常见问题，如网络异常和文件格式验证，以确保上传的稳定性和可靠性。 ... [详细]

蜡笔小新 2024-10-27 17:44:50
jsp
网络爬虫的规范与限制

本文探讨了网络爬虫引发的问题及其解决方案，重点介绍了Robots协议的作用和使用方法，旨在为网络爬虫的合理使用提供指导。 ... [详细]

蜡笔小新 2024-11-13 15:45:41
foreach
PHP微信开发基础教程（第三篇）：详解消息类型处理

在本文中，我们将详细介绍如何构建一个用于自动回复消息的XML类。当微信服务器接收到用户消息时，该类将生成相应的自动回复消息。以下是具体的代码实现：```phpclass We_Xml { // 代码内容}```通过这个类，开发者可以轻松地处理各种消息类型，并实现高效的自动回复功能。我们将深入探讨类的各个方法和属性，帮助读者更好地理解和应用这一技术。 ... [详细]

蜡笔小新 2024-11-09 15:50:27
jsp
在CentOS 6.6 64位系统上部署Tomcat 8服务器环境配置指南

本指南详细介绍了如何在CentOS 6.6 64位系统上以root用户身份部署Tomcat 8服务器。系统环境为CentOS 6.6 64位，采用源码安装方式。所需软件为apache-tomcat-8.0.23.tar.gz，建议将软件下载至/root/opt目录。具体下载地址请参见官方资源。本指南涵盖了从环境准备到服务启动的完整步骤，适用于需要在该系统环境下搭建高性能Web应用服务器的技术人员。 ... [详细]

蜡笔小新 2024-11-08 21:38:15
string
利用GLSL在iOS上实现YV12到RGB的转换，并附带展示结果图像

本文介绍了如何在iOS平台上使用GLSL着色器将YV12格式的视频帧数据转换为RGB格式，并展示了转换后的图像效果。通过详细的技术实现步骤和代码示例，读者可以轻松掌握这一过程，适用于需要进行视频处理的应用开发。 ... [详细]

蜡笔小新 2024-11-06 19:18:22
foreach
某CMS 20180827版前端存在GETShell漏洞分析

2018年9月21日，Destoon官方发布了安全更新，修复了一个由用户“索马里的海贼”报告的前端GETShell漏洞。该漏洞存在于20180827版本的某CMS中，攻击者可以通过构造特定的HTTP请求，利用该漏洞在服务器上执行任意代码，从而获得对系统的控制权。此次更新建议所有用户尽快升级至最新版本，以确保系统的安全性。 ... [详细]

蜡笔小新 2024-11-06 11:57:32
web
如何安全地手动移除Exchange Server 2003以确保系统稳定性和数据完整性

本文详细介绍了如何安全地手动卸载Exchange Server 2003，以确保系统的稳定性和数据的完整性。根据微软官方支持文档（https://support.microsoft.com/kb833396/zh-cn），在进行卸载操作前，需要特别注意备份重要数据，并遵循一系列严格的步骤，以避免对现有网络环境造成不利影响。此外，文章还提供了详细的故障排除指南，帮助管理员在遇到问题时能够迅速解决，确保整个卸载过程顺利进行。 ... [详细]

蜡笔小新 2024-11-06 08:13:47
web
在VMware虚拟机中部署带有中文图形界面的CentOS 7 Linux系统

本文详细介绍了在VMware虚拟机中部署带有中文图形界面的CentOS 7 Linux系统的步骤。首先，通过“文件”菜单选择“新建虚拟机”并进入自定义设置。接着，在硬盘兼容性选项中选择默认设置。为了更好地进行Linux操作系统的安装练习，建议选择稍后安装操作系统，并在虚拟机安装完成后，根据实际需求删除不必要的硬件组件。此外，本文还提供了详细的配置参数和注意事项，帮助用户顺利完成整个部署过程。 ... [详细]

蜡笔小新 2024-11-05 15:35:12
export
Node.js 配置文件管理方法详解与最佳实践

本文详细介绍了 Node.js 中配置文件管理的方法与最佳实践，涵盖常见的配置文件格式及其优缺点，并提供了多种实用技巧和示例代码，帮助开发者高效地管理和维护项目配置，具有较高的参考价值。 ... [详细]

蜡笔小新 2024-11-05 06:40:19
jsp
如何在Mac上构建高效的本地服务器环境

在Mac上构建高效的本地服务器环境，首先需要了解基本步骤：1. 配置目录基础；2. 启动Apache服务；3. 添加自定义文档至本地服务器；4. 查看自定义效果。此外，还可以通过手机或其他电脑访问本机服务器，以确保跨设备的兼容性和调试效果。Mac系统自带的Apache服务为本地开发提供了便捷的工具，本文将详细介绍每个步骤的具体操作方法。 ... [详细]

蜡笔小新 2024-11-04 15:46:21
export
在CentOS 7上部署WebRTC网关Janus

在CentOS 7上部署WebRTC网关Janus ... [详细]

蜡笔小新 2024-11-04 11:09:50
plugins
如何在AppFog免费云平台上部署WordPress：详细图文指南

AppFog 是一个基于 CloudFoundry 的多语言 PaaS（平台即服务）提供商，允许用户在其平台上轻松构建和部署 Web 应用程序。本文将通过详细的图文步骤，指导读者如何在 AppFog 免费云平台上成功部署 WordPress，帮助用户快速搭建个人博客或网站。 ... [详细]

蜡笔小新 2024-11-02 12:50:27
web
利用Google Sheets自定义函数实现Ajax调用 - Executing Ajax Requests via Google Sheets Custom Functions

本文探讨了如何在 Google Sheets 中通过自定义函数实现 AJAX 调用。具体介绍了编写脚本的方法，以便在电子表格中发起 AJAX 请求，从而实现数据的动态获取与更新。这种方法不仅简化了数据处理流程，还提高了工作效率。 ... [详细]

蜡笔小新 2024-11-01 09:54:38

手机用户2602883245

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章