ejemplos - contenteditable javascript
contenteditable entrada de línea única (8)
Aquí hay una solución relativamente simple que usa el evento de entrada del contenteditable para escanear el dom y filtrar varios sabores de líneas nuevas (por lo que debe ser robusto contra copiar / pegar, arrastrar y soltar, presionar enter en el teclado, etc.). Condensa múltiples TextNodes en un solo TextNodes, elimina líneas nuevas de TextNodes, elimina BRs, y pone una "pantalla: en línea" en cualquier otro elemento que toque. Probado en Chrome, sin garantías en ningún otro lado.
var editable = $(''#editable'')
editable.on(''input'', function() {
return filter_newlines(editable);
});
function filter_newlines(div) {
var node, prev, _i, _len, _ref, _results;
prev = null;
_ref = div.contents();
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
node = _ref[_i];
if (node.nodeType === 3) {
node.nodeValue = node.nodeValue.replace(''/n'', '''');
if (prev) {
node.nodeValue = prev.nodeValue + node.nodeValue;
$(prev).remove();
}
_results.push(prev = node);
} else if (node.tagName.toLowerCase() === ''br'') {
_results.push($(node).remove());
} else {
$(node).css(''display'', ''inline'');
filter_newlines($(node));
_results.push(prev = null);
}
}
return _results;
}
#editable {
width: 200px;
height: 20px;
border: 1px solid black;
}
<div id="editable" contenteditable="true"></div>
O aquí está el violín: http://jsfiddle.net/tG9Qa/
Para una aplicación que estamos desarrollando en la compañía donde trabajo, necesitamos una entrada que permita insertar emoticones dentro de nuestra aplicación web basada en JS. Actualmente estamos usando una entrada con los códigos cortos de emoticones (es decir, '':-)'') y nos gustaría cambiar a la inserción de imágenes reales y gráficas.
Nuestro plan original era usar un <div> . Estamos utilizando escuchas para el evento de pegar, así como también las diferentes interacciones de tecla / mouse para asegurarnos de que no se agregue ningún marcado no deseado al contenteditable (quitamos el texto de sus etiquetas de contenedor y dejamos solo las etiquetas de imagen que insertamos nosotros).
Sin embargo, el problema en este momento es que el div se cambia de tamaño si se coloca suficiente contenido (es decir, su altura aumenta). No queremos que esto suceda, ni es aceptable que el texto quede oculto (es decir, overflow: hidden normal overflow: hidden ). Asi que:
¿Hay alguna manera de hacer que el div satisfactorio se comporte como una entrada de una sola línea?
Me gustaría que fuera mejor si hay una propiedad de atributo / CSS relativamente simple que he omitido que hará lo que quiero, pero si es necesario, también se apreciarán las sugerencias de CSS + JS.
Creo que estás buscando un div contenteditable con solo una línea de texto que se desplaza horizontalmente cuando desborda el div . Esto debería hacer el truco: http://jsfiddle.net/F6C9T/1
div {
font-family: Arial;
font-size: 18px;
min-height: 40px;
width: 300px;
border: 1px solid red;
overflow: hidden;
white-space: nowrap;
}
<div contenteditable>
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
</div>
La min-height: 40px incorpora la altura para cuando aparece la barra de desplazamiento horizontal. Una min-height:20px se expandiría automáticamente cuando aparezca la barra de desplazamiento horizontal, pero esto no funciona en IE7 (aunque podría usar comentarios condicionales para aplicar un estilo separado si así lo desea).
Mira esta respuesta que acabo de publicar. Esto debería ayudarte:
Cómo crear una etiqueta de contenido de línea única HTML5Editable que escucha Enter y Esc
Aquí está el marcado de HTML:
<span contenteditable="false"></span>
Aquí está el jQuery / javascript:
$(document).ready(function() {
$(''[contenteditable]'').dblclick(function() {
$(this).attr(''contenteditable'', ''true'');
clearSelection();
$(this).trigger(''focus'');
});
$(''[contenteditable]'').live(''focus'', function() {
before = $(this).text();
if($(this).attr(''contenteditable'') == "true") { $(this).css(''border'', ''1px solid #ffd646''); }
//}).live(''paste'', function() {
}).live(''blur'', function() {
$(this).attr(''contenteditable'', ''false'');
$(this).css(''border'', ''1px solid #fafafa'');
$(this).text($(this).text().replace(/(/r/n|/n|/r)/gm,""));
if (before != $(this).text()) { $(this).trigger(''change''); }
}).live(''keyup'', function(event) {
// ESC=27, Enter=13
if (event.which == 27) {
$(this).text(before);
$(this).trigger(''blur'');
} else if (event.which == 13) {
$(this).trigger(''blur'');
}
});
$(''[contenteditable]'').live(''change'', function() {
var $thisText = $(this).text();
//Do something with the new value.
});
});
function clearSelection() {
if ( document.selection ) {
document.selection.empty();
} else if ( window.getSelection ) {
window.getSelection().removeAllRanges();
}
}
¡¡¡Espero que esto ayude a alguien!!!
Por lo tanto, para la posteridad: la solución más simple es hacer que su gerente de producto cambie los requisitos para que pueda hacer la edición de líneas múltiples. Esto es lo que terminó sucediendo en nuestro caso.
Sin embargo, antes de que eso sucediera, terminé yendo bastante lejos en la creación de un editor de texto enriquecido de una sola línea que se movía manualmente. Lo envolví en un plugin jQuery al final. No tengo tiempo para terminarlo (probablemente haya errores en IE, Firefox funciona mejor y Chrome funciona bastante bien; los comentarios son escasos ya veces no muy claros). Utiliza partes de la biblioteca Rangy (extraída porque no quería confiar en la biblioteca completa) para obtener posiciones de pantalla de las selecciones para probar la posición del mouse frente a la selección (para que pueda arrastrar las selecciones y mover el cuadro).
Aproximadamente, funciona usando 3 elementos. Un div externo (lo que se llama el complemento), que se desborda: oculto, y luego 2 niveles de anidación dentro de él. El primer nivel está absolutamente posicionado, el segundo nivel es el contenido actual. Esta separación es necesaria porque, de lo contrario, algunos buscadores le darán al elemento de agarre con contenteditable elemento de posición absoluta, para que el usuario pueda moverlo ...
En cualquier caso, hay un montón de código para mover el elemento absolutamente posicionado dentro del elemento superior, moviendo así el contenido actual. El contenteditable en sí mismo tiene espacio vacío en blanco, etc., etc. para forzarlo a permanecer en una sola línea.
También hay un código en el complemento que elimina cualquier cosa que no sea una imagen (como br , tablas, etc.) de cualquier texto pegado / arrastrado en el cuadro. Necesitas algunas partes de esto (como la brs, pelar / normalizar párrafos, etc.) pero quizás quieras mantener enlaces, em , strong y / o algún otro formato.
Fuente: https://gist.github.com/1161922
Puede reemplazar este div con la entrada de texto (después de llamar al evento onclick).
He usado algo similar a este complemento y funcionó bien.
Si desea una forma diferente de resolverlo que no sea cambiar los requisitos, con una pequeña display:table es totalmente posible =)
.container1 {
height:20px;
width:273px;
overflow:hidden;
border:1px solid green;
}
.container2 {
display:table;
}
.textarea {
width:273px;
font-size: 18px;
font-weight: normal;
line-height: 18px;
outline: none;
display: table-cell;
position: relative;
-webkit-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
word-wrap: break-word;
overflow:hidden;
}
<div class="container1">
<div class="container2">
<div contenteditable="true" class="textarea"></div>
</div>
</div>
con jQuery he establecido un evento .keypress y luego prueba e.keyCode == 13 (tecla de retorno) y si devuelve false del evento y la edición no es capaz de hacer multilíneas
$(''*[contenteditable=yes]'').keypress(function(e) {
if(e.keyCode == 13 && !$(this).data(''multiline'')) {
return false;
}
})
[contenteditable="true"].single-line {
white-space: nowrap;
width:200px;
overflow: hidden;
}
[contenteditable="true"].single-line br {
display:none;
}
[contenteditable="true"].single-line * {
display:inline;
white-space:nowrap;
}
<div contenteditable="true" class="single-line">
This should work.
</div>