Perguntas com a marcação «contenteditable»

Eu quero executar uma função quando um usuário edita o conteúdo de um divcom contenteditableatributo. Qual é o equivalente de um onchangeevento? Estou usando o jQuery, portanto, qualquer solução que use o jQuery é preferida. Obrigado!

359 javascript  jquery  html  contenteditable 

Eu tenho esse HTML simples como exemplo: <div id="editable" contenteditable="true"> text text text<br> text text text<br> text text text<br> </div> <button id="button">focus</button> Quero uma coisa simples - quando clico no botão, quero colocar o cursor (cursor) em um local específico na div editável. Ao pesquisar na Web, tenho esse JS …

191 javascript  jquery  contenteditable  caret  cursor-position 

Estou atrás de uma solução definitiva entre navegadores para definir a posição do cursor / cursor para a última posição conhecida quando um contentEditable = 'on' <div> recupera o foco. Parece que a funcionalidade padrão de uma div editável de conteúdo é mover o cursor / cursor para o início …

142 javascript  jquery  html  contenteditable  cursor-position 

Eu tenho um contenteditableelemento, e sempre que digito algumas coisas e clico ENTERnele, cria um novo <div>e coloca o novo texto de linha lá. Eu não gosto disso nem um pouco. É possível impedir que isso aconteça ou pelo menos apenas substituí-lo por um <br>? Aqui está a demonstração http://jsfiddle.net/jDvau/ …

131 javascript  jquery  google-chrome  html  contenteditable 

Como faço para ouvir o contentEditablecontrole baseado em evento de mudança ? var Number = React.createClass({ render: function() { return <div> <span contentEditable={true} onChange={this.onChange}> {this.state.value} </span> = {this.state.value} </div>; }, onChange: function(v) { // Doesn't fire :( console.log('changed', v); }, getInitialState: function() { return {value: '123'} } }); React.renderComponent(<Number />, …

120 javascript  dom  contenteditable  reactjs 

Estou encontrando toneladas de boas respostas de crossbrowser sobre como AJUSTAR o cursor ou a posição do índice circunflexo em um contentEditableelemento, mas nenhuma sobre como GET ou encontrar seu índice ... O que eu quero fazer é saber o índice do circunflexo dentro desta div, em keyup. Portanto, quando …

119 javascript  contenteditable  caret  cursor-position 

Em JavaScript, é possível selecionar texto de forma programática em um elemento inputou textarea. Você pode focar uma entrada com ipt.focus()e selecionar seu conteúdo com ipt.select(). Você pode até selecionar um intervalo específico com ipt.setSelectionRange(from,to). Minha pergunta é: existe alguma maneira de fazer isso em um contenteditableelemento também? Descobri que …

119 javascript  selection  contenteditable 

saída no 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> Eu acredito que o FF seria mais ou menos assim: hey <br /> what's up? e no IE : hey <p>what's up?</p> infelizmente, não há uma maneira legal de fazer com que cada navegador …

111 javascript  html  cross-browser  contenteditable  caret 

Quando eu defino um pré-elemento como contenteditable e coloco o foco nele para edição, ele recebe uma borda pontilhada ao redor que não parece muito boa. A fronteira não está lá quando o foco está em outro lugar. Como faço para remover essa borda? obrigado

96 javascript  jquery  contenteditable 

Estou pensando em criar um editor com Slate ou ProseMirror e vendo algum comportamento estranho com o Chrome em torno da posição do cursor e da área de seleção ao usar um elemento embutido. O problema 1 é mostrado na primeira figura abaixo. Quando a posição do cursor de texto …

8 html  css  contenteditable  slatejs  prose-mirror