相关疑难解决方法(0)

CSS的值inline和inline-block值之间究竟有什么区别display？

Web应用程序如何检测粘贴事件并检索要粘贴的数据？

我想在将文本粘贴到富文本编辑器之前删除HTML内容.

之后粘贴后清理文本有效,但问题是所有以前的格式都丢失了.例如,我可以在编辑器中编写一个句子并将其设为粗体,但是当我粘贴新文本时,所有格式都会丢失.我想只清理粘贴的文本,并保持以前的格式不变.

理想情况下,该解决方案应适用于所有现代浏览器(例如,MSIE,Gecko,Chrome和Safari).

请注意,MSIE有clipboardData.getData(),但我找不到其他浏览器的类似功能.

Chrome中的输出:

<div id="content" contenteditable="true" style="border:1px solid #000;width:500px;height:40px;">
    hey
    <div>what's up?</div>
<div>
<button id="insert_caret"></button>

我相信FF看起来像这样:

hey
<br />
what's up?

在IE中:

hey
<p>what's up?</p>

不幸的是,没有很好的方法来制作它,以便每个浏览器插入一个<br />而不是div或p-tag,或者至少我在网上找不到任何东西.

无论如何,我现在要做的是,当我按下按钮时,我希望将插入符号设置在文本的末尾,所以它应该看起来像这样:

hey
what's up?|

任何方式这样做,所以它适用于所有浏览器？

例:

$(document).ready(function()
{
    $('#insert_caret').click(function()
    {
        var ele = $('#content');
        var length = ele.html().length;

        ele.focus();

        //set caret -> end pos
     }
 }

我contenteditable在SAFARI/CHROME上有换行问题.当我在contentEditable上按"return" <div>,而不是创建一个<br>(像Firefox),他们创建一个新的<div>:

<div>Something</div>
<div>Something</div>

看起来像(在contentEditable DIV上):

Something
Something

但是在清理(删除<div>)之后,我得到了这个:

SomethingSomething

在Firefox中,contenteditable是:

Something
<br>
Something

卫生处理后看起来一样:

Something
Something

是否有任何解决方案可以跨浏览器"规范化"这个？

我已经在Make a <br>而不是<div> </ div>上找到了这个代码,只需在一个contenteditable上按Enter键

$(function(){

  $("#editable")

  // make sure br is always the lastChild of contenteditable
  .live("keyup mouseup", function(){
    if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != "br") {
      this.appendChild(document.createChild("br"));
     }
  })

  // use br instead of div div
  .live("keypress", function(e){
    if (e.which == 13) {
      if (window.getSelection) {
        var …

我在数据库中存储内容,例如:

Hello
This
is 
Text

当我将它传递给textarea时,它会保留新的换行符.但是,如果我将该文本传递给内容可编辑的div,它将保持如下:

Hello This is Text

我该如何解决这个问题？

出于某种原因,我需要使用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>

CSS:

div.outside {
  margin: 30px;
}
div.text-input {
  display:inline-block;
  background-color: black;
  color: white;
  width: 300px;
}

用于显示问题的JSFiddle

是否有一种方法(CSS或javascript都可以接受)使浏览器只在点击它时给焦点而不是点击同一行？

PS我注意到有类似的问题(链接到其他相关的帖子 …

我在键盘事件处理程序中编写了一些代码,<br>以便在按下Enter键时插入一个代码:

event.preventDefault();
document.execCommand('InsertHTML', true, '<br>');

这只有在光标在两个字母之间时才有效,如果它在最后我需要两个 - <br>元素.我可以检测到我是否在一条线的末端？或者输入问题的其他一些工作想法？

我还尝试捕捉正常的键事件(按下按下的ctrl-Key)并使用JS创建键盘事件,其中Enter键与ctrl一起按下.但这不起作用......

它只需要在Webkit/Safari中工作......

我正在尝试读取内容可编辑 div 上的多行用户输入，但是当我使用contentEditableDiv.innerText.

我试过textContent，但它不返回任何换行符，而innerText有时返回太多。innerHTML似乎不合适，因为我不想要任何 HTML 代码，只是文本。

如果我的div包含：

a
b

它返回“a?b”（97 10 98在示例中）

但如果我的<div>包含：

a

b

innerText返回a???b（一个太多？，97 10 10 10 98在示例中）

a
b

a

b

我在Chrome上尝试了以下代码:

document.execCommand("insertBrOnReturn", false, true);

http://jsfiddle.net/uVcd5/

我将最后一个参数设置为true或false,行为不会改变:返回时,<div>将添加新元素.

一定错过了什么......有什么想法吗？

我有一个div

<div contentEditable="true">
    <h1> My headline</h1>
</div>

如果我正在编辑<h1>标签内的文本,并按回车键,则会在其下添加一个新的div,而不是在输入返回时通常插入的正常段落标记

进行中:

<div contentEditable="true">
    <h1> My headline edited</h1>
    <div> i tapped return</div>
</div>

我真正想要的是

<div contentEditable="true">
    <h1> My headline edited</h1>
    <p> i tapped return</p>
    <p> return again</p>
</div>

奇怪的是,通常当你在某处写字并按回车时它会添加一个新的<p>,但只是在编辑时<h1>.是否可以使用Javascript/Jquery/Html5解决此问题？

我在iOS设备上使用Safari

我在下面有一个字符串,我想删除尾随,
但我正在努力.有帮助吗？

This is a string<br>    
next line<br>

所以在我的函数之后,字符串应该是

This is a string<br>
next line

以下执行此代码似乎不起作用.嗯,它有效,但它没有清除两个尾随的休息时间.

mystring=mystring.replace(/<br>$/,''); 

所以如果我的字符串实际上是:

This is a string<br>
next line<br>
<br>

那么上面的代码就会返回

This is a string<br>
next line
<br>

我想让 Materialize.css 卡在双击时可编辑。为此，我将输入放在卡片 div 中，而不是 p 中。

div.row
each cards
  div.col.m4.s12
    div.card.teal
      div.card-content.white-text
        if openCard
          //input(type='text' value='#{text}')              
          textarea.materialize-textarea #{text}
        else                   
          p #{text}

问题是输入（和文本区域）元素具有广泛的材料设计样式，包括输入下方的线条。在其他场合它看起来很整洁，但在卡片内部它完全没有必要。

有没有办法从输入元素中删除样式，以便它可以在双击编辑模式下使用？

或者也许还有其他解决方案，如何通过双击卡片进行编辑，而不涉及重复使用以前样式的元素？

ps 我在 Meteor 中运行它，并且有 Jade 预处理器。然而，这些事实不应影响问题或答案。