出于某种原因,我需要使用contenteditable div而不是普通的文本输入来输入文本.(对于一些javascript库)它工作正常,直到我发现当我设置contenteditable div使用时display: inline-block,即使我点击div之外,它也会给div提供焦点!
我需要它只有当用户点击div而不是它周围时才给焦点div.目前,我发现当用户点击其他地方然后单击与div相同的行的位置时,它会关注它.
一个显示问题的简单示例:
HTML:
<div class="outside">
<div class="text-input" contenteditable="true">
Input 1
</div>
<div class="text-input" contenteditable="true">
Input 2
</div>
<div class="unrelated">This is some unrelated content<br>
This is some more unrelated content
This is just some space to shows that clicking here doesn't mess with the contenteditable div
but clicking the side mess with it.
</div>
</div>
Run Code Online (Sandbox Code Playgroud)
CSS:
div.outside {
margin: 30px;
}
div.text-input {
display:inline-block;
background-color: black;
color: white;
width: 300px;
}
Run Code Online (Sandbox Code Playgroud)
是否有一种方法(CSS或javascript都可以接受)使浏览器只在点击它时给焦点而不是点击同一行?
PS我注意到有类似的问题(链接到其他相关的帖子 …
当在主体上完成滚动时,内联CKEditor正确滚动文本.以下是官方演示.
http://sdk.ckeditor.com/samples/inline.html
但是,当滚动不在主体中但在iframe或div中时,滚动甚至在最新版本之前都不起作用(版本4.5.5).这里有一些问题,例如,
滚动"可滚动"div时,Ckeditor内联编辑器会保留在屏幕上
这个解决方案有效,但我可能在同一页面上有超过20个编辑器,并且检查每个人对我的页面来说太重了.
另一个看起来不错的解决方案对我来说不起作用,但我想要的是像这样的轻量级解决方案.
PS对于那些想要测试你的解决方案是否有效的人来说,这里是你可以测试的代码的开头:https: //jsfiddle.net/pteryvk3/6/
<script src="//cdn.ckeditor.com/4.4.7/standard/ckeditor.js"></script>
<div id='' style="overflow: scroll;height:500px;width:90%;position:absolute">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In est ipsum, elementum id ipsum vel, aliquam lobortis ligula. Nam vel purus eget nulla bibendum interdum at non orci. Nulla facilisi. Vivamus aliquet sapien risus. Mauris molestie efficitur pharetra. Aliquam erat volutpat. Fusce ac leo pretium, ornare libero et, tincidunt erat. Nunc tempus tortor eget ex ultricies, a cursus nibh fringilla.
Lorem ipsum dolor …Run Code Online (Sandbox Code Playgroud) 在apache conf文件中,如果一行开头#,该行将被计为注释.例如,
#This is a comment line
#And then the following is some real settings:
AllowOverride None
Run Code Online (Sandbox Code Playgroud)
但是,这是不允许的.
#And then the following is some real settings:
AllowOverride None #A comment that starts in the middle of line
Run Code Online (Sandbox Code Playgroud)
是否可以在行中间开始评论?如果是,怎么样?
要在HTML5中使用滑块,我们可以使用范围输入.即
<input type="range" min="0" max='5' value="0" step="1" >
Run Code Online (Sandbox Code Playgroud)
默认行为是左侧的最小值和右侧的最大值.有没有办法可以将最大值放在左侧?
我知道我可以用Javascript做到这一点.有没有办法单独使用HTML?
回复"可能重复的问题":
那个问题接受javascript解决方案,我要求的是HTML解决方案.我认为这显然不是重复吗?
我有一个带有外部图像的HTML div.(以下是一个示例,但在实际情况下我使用的是Amazon S3,因此无法在同一台服务器上下载和存储图像)目前我正在使用html2canvas将div转换为图像.但是,外部图像始终由空格替换.
我用来捕获图像的代码:
$(function() {
$("#btnSave").click(function() {
html2canvas($("#widget"), {
onrendered: function(canvas) {
theCanvas = canvas;
document.body.appendChild(canvas);
// Convert and download as image
Canvas2Image.saveAsPNG(canvas);
$("#img-out").append(canvas);
}
});
});
});
Run Code Online (Sandbox Code Playgroud)
编辑: jsfiddle:https : //jsfiddle.net/0y2zxxL8/3/
我可以使用其他图书馆.我也可以在后端做到这一点.(我使用PHP + laravel 5作为后端)有没有办法用外部图像生成HTML div的"屏幕截图"?
更新编辑后,当前答案正在运行.然而,对于我的实际使用,将有多个图像,其位置由用户通过拖放设置.我仍然可以获得这个位置,但如果不能具体设置位置,对我来说会更好.
laravel模型提供了一种方法,它可以返回来自另一个关联表的结果.
例如,我有一个名为item的表和另一个名为feedback的表,其中反馈表存储项表中项的反馈.因此,为了得到id为1的项目的所有反馈,我将做:
Item::find(1)->feedback;
Run Code Online (Sandbox Code Playgroud)
以下是返回对象的打印输出.
Illuminate\Database\Eloquent\Collection Object
( [items:protected] => Array
(
[0] => Feedback Object
(
[table:protected] => feedback
[connection:protected] =>
[primaryKey:protected] => id
[perPage:protected] => 15
[incrementing] => 1
[timestamps] => 1
[attributes:protected] => Array
(
[id] => 1
[rma_id] => 3
[item_id] => 8
[quo_id] => 0
[case_id] => i2eM20160120
[line_no] => 000001
[content] => test
[status] => sent
[read] => 0
[sender] => Tester
[created_at] => 2016-01-20 18:03:44
[updated_at] => 2016-01-20 18:03:44
)
[original:protected] => Array
( …Run Code Online (Sandbox Code Playgroud) 我有一个HTML5范围输入
<input name="testing" type="range" min="0" max="10" step="1">
Run Code Online (Sandbox Code Playgroud)
如果没有设置属性"value",则将默认值设置为中间值(在本例中为5).有没有办法让它变空,以便我知道用户是否积极输入了什么?
我有另一个div值显示.在开始时,值将为"?",因此用户将知道他们没有输入任何内容.问题是如果未积极设置值,则阻止输入将值提交到后端.
我正在使用正式的PHP SDK与laravel的官方服务提供商将图像上传到Amazon S3.图像暂时存储在我的服务器上,上传后应删除.以下是我用来上传和删除的代码.
$temp_path = "/screenshot_temp/testing.png";
$client = AWS::createClient('s3');
$result = $client->putObject(array(
'Bucket' => self::$bucketName,
'Key' => 'screenshot/testing.png',
'SourceFile' => $temp_path,
'ACL' => 'public-read'
));
);
chown($temp_path, 777);
unlink($temp_path);
Run Code Online (Sandbox Code Playgroud)
上传成功.我可以通过链接返回看到我的图像,我可以在亚马逊控制台上看到它.问题是删除失败,并显示以下错误消息:
ErrorException: unlink(... path of my file ...): Permission denied
Run Code Online (Sandbox Code Playgroud)
我确信我的文件权限设置是正确的,我可以删除我的文件与代码部分上传到S3注释.所以应该是在上传文件期间文件被锁定的问题.有没有办法解锁和删除我的文件?
我正在尝试为不同的用户动态创建数据库.(每个用户都有自己的数据库服务器,所以不要问为什么我没有为所有用户使用单个数据库)为此,我有一个存储所有连接信息的默认数据库.我需要:
有没有办法可以根据默认数据库中的信息动态设置迁移文件的数据库连接?
PS对于"动态设置数据库连接",我并不像在控制器或类中那样表示正常设置.我希望能够至少在目标数据库中创建迁移表并能够自我检测要运行的迁移文件.
众所周知,使用max-height和max-width可以使图像自动适合div,如下所示:
.cover img {
max-width: 100%;
max-height: 100%;
}
Run Code Online (Sandbox Code Playgroud)
有没有办法制作一个半透明的封面(通过设置opacity: 0.8为div),恰好适合图像的大小而不通过javascript获得宽度和高度?
以下是我在jsfiddle的尝试.我只能覆盖整个容器,但我想要的只是覆盖图像.图像的大小是可变的,因为它们将由用户上载. https://jsfiddle.net/muorou0c/1/
html ×6
laravel ×4
php ×4
css ×3
javascript ×3
html5 ×2
laravel-5 ×2
amazon-s3 ×1
apache ×1
ckeditor ×1
ckeditor4.x ×1
comments ×1
css3 ×1
html2canvas ×1
httpd.conf ×1
image ×1
model ×1
object ×1