在包含图像的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

推荐阅读

io
ava.lang.Class.getDeclaredMethod()方法

java.lang.Class.getDeclaredMethod()方法java.lang.Class.getDeclaredMethod()方法用法实例教程-方法返回一个Met ... [详细]

蜡笔小新 2023-10-17 06:32:19
list
mintui中的下拉加载，可以一直加载数据，怎么处理呢？

html结构 ... [详细]

蜡笔小新 2023-10-17 10:44:03
function
单击时动态创建
元素 - Dynamically create
element on click

Ihavethefollowingonhtml我在html上有以下内容<html><head><scriptsrc..3003_Tes ... [详细]

蜡笔小新 2023-12-12 15:59:36
function
MooTools和JQuery并排 - MooTools and JQuery Side by Side

IjustinheritedsomewebpageswhichusesMooTools.IneverusedMooTools.NowIneedtoaddsomef ... [详细]

蜡笔小新 2023-12-12 13:43:58
jar
如何实现JDK版本的切换功能，解决开发环境冲突问题

本文介绍了在开发过程中遇到JDK版本冲突的情况，以及如何通过修改环境变量实现JDK版本的切换功能，解决开发环境冲突的问题。通过合理的切换环境，可以更好地进行项目开发。同时，提醒读者注意不仅限于1.7和1.8版本的转换，还要适应不同项目和个人开发习惯的需求。 ... [详细]

蜡笔小新 2023-12-10 19:24:11
jsp
Unity3D引擎的体系结构和功能详解

本文详细介绍了Unity3D引擎的体系结构和功能。Unity3D是一个屡获殊荣的工具，用于创建交互式3D应用程序。它由游戏引擎和编辑器组成，支持C#、Boo和JavaScript脚本编程。该引擎涵盖了声音、图形、物理和网络功能等主题。Unity编辑器具有多语言脚本编辑器和预制装配系统等特点。本文还介绍了Unity的许可证情况。Unity基本功能有限的免费，适用于PC、MAC和Web开发。其他平台或完整的功能集需要购买许可证。 ... [详细]

蜡笔小新 2023-12-10 11:01:31
function
org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的使用及代码示例

本文整理了Java中org.gwtbootstrap3.client.ui.Icon.addDomHandler()方法的一些代码示例，展示了Icon.ad ... [详细]

蜡笔小新 2023-10-17 22:46:43
function
javascript – RTL布局中的bootstrap datepicker无法正常工作

RTL布局中的bootstrapdatepicker工作不正常,我正在使用这个bootstrapdatepickerhttp:bootstrap-datepicker.readth ... [详细]

蜡笔小新 2023-10-17 18:57:35
default
AndroidStudio 2.3迁移3.0踩坑之——Could not resolve project

参见StackOverflow如果你的项目引用了自己的库，在迁移到3.0后，编译就会报错。Error:Failedtoresolve:Couldnotresolveproject: ... [详细]

蜡笔小新 2023-10-17 11:28:26
default
io.netty.handler.codec.http.FullHttpRequest.content()方法的使用及代码示例

本文整理了Java中io.netty.handler.codec.http.FullHttpRequest.content()方法的一些代码示例，展示了Fu ... [详细]

蜡笔小新 2023-10-17 04:24:02
list
org.assertj.core.api.AbstractPathAssert.existsNoFollowLinks()方法的使用及代码示例

本文整理了Java中org.assertj.core.api.AbstractPathAssert.existsNoFollowLinks()方法的一些代码示例，展示了 ... [详细]

蜡笔小新 2023-10-16 19:18:28
node.js
未来五年内，Python的普及程度是否会超过JavaScript？

JavaScript和Python是用于构建各种应用程序的两种有影响力的编程语言。尽管JavaScript多年来一直是占主导地位的编程语言，但Python的迅猛发展有 ... [详细]

蜡笔小新 2023-10-16 18:30:05
jsp
入门Java需熟练掌握哪些技术呢？

Java工程师无疑是当下令人艳羡的工作之一，因此，每年都有大批大批的朋友想要报名Java工程师学习Java也就不奇怪了。那么入门Java掌握哪些技术能力 ... [详细]

蜡笔小新 2023-10-16 15:56:51
js
jsdocument.documentElement document.body

其实之前一直对于document.documentElement和document.body不是很清楚,查了下资料-在html和xhtml中定义的差别..要获取当前页面的滚动条纵 ... [详细]

蜡笔小新 2023-10-16 13:46:18
function
【clientX，offsetX，screenX】【scrollWidth，clientWidth，offsetWidth】的区别

一、深刻认识clientX，offsetX，screenX概念（来源于网络）：clientX设置或获取鼠标指针 ... [详细]

蜡笔小新 2023-10-16 10:34:16

手机用户2602883245

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

Tags | 热门标签

RankList | 热门文章