0
201
ViewsAgregar dinámicamente la entrada donde se hizo clic con el mouse
Estoy tratando de mostrar una entrada donde hizo clic mi casa, si no ingreso nada en la opción de venta, la entrada se mostrará en el siguiente clic del mouse. De alguna manera, parece que no puedo escribir dentro de esa entrada.
tengo
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <style type="text/css"> html, body { height: 100%; } i{ z-index:10000; color: white; font-size: 20px; } .btn-done { z-index:10000; position: absolute; right: 5px; top: 5px; } .btn-done { z-index:10000; position: absolute; right: 15px; top: 5px; } </style> <a href="/api-mapper" class="btn btn-default btn-cancel">Cancel</a> <a class="btn btn-success btn-done">Done</a> <img src="{{ \Storage::disk('s3')->url($apiMapperImage->full) }}" width="100%"> <script type="text/javascript"> var pins = []; var i = 0; $("body").click(function(e) { var api = {}; api.x = e.pageX-10; api.y = e.pageY-10; $("input").hide(); const input = $('<i class="fa fa-location"></i> <input type="text" name="'+ api.x+'-'+api.y +'">').css("position", "absolute").css("top", e.pageY-10).css("left", e.pageX-10) $("body").append(input); pins.push(api); $("input").click(function(e) { console.log($(this).val()) }); console.log("pins",pins); }); </script>2 answers
Answer question0
El problema es que tan pronto como hace clic en el cuerpo, crea un nuevo icono y elemento de entrada. Luego, cuando hace clic en el elemento de entrada, se puede ver (muy brevemente) que se enfoca, pero inmediatamente el clic sube al cuerpo y se crea otra entrada, exactamente en el mismo lugar superpuesto a la primera, y así sigue en.
Para detener esto, debe detener la propagación de un clic en un elemento de entrada al cuerpo, por lo que la función onclick para una entrada debe llamar a e.stopPropagation()
Existe el problema adicional de que el icono tiene un índice z alto. Esto significa que está sobrescribiendo la primera parte de la nueva entrada, por lo que si el usuario hace clic allí, lo cual es muy probable, el clic no hace que la entrada se enfoque. El fragmento elimina la configuración del índice z.
Hay algunas otras cosas en las que pensar: ¿por qué el clic se detecta en todo el cuerpo en lugar de en la imagen real, por ejemplo? Pero más allá del alcance de esta pregunta.
var pins = []; var i = 0; $("body").click(function(e) { var api = {}; api.x = e.pageX - 10; api.y = e.pageY - 10; $("input").hide(); const input = $('<i class="fa fa-location"></i> <input type="text" name="' + api.x + '-' + api.y + '">').css("position", "absolute").css("top", e.pageY - 10).css("left", e.pageX - 10) $("body").append(input); pins.push(api); $("input").click(function(e) { e.stopPropagation(); console.log($(this).val()) }); console.log("pins", pins); }); html, body { height: 100%; } i { /* z-index: 10000; REMOVED */ color: white; font-size: 20px; } .btn-done { z-index: 10000; position: absolute; right: 5px; top: 5px; } .btn-done { z-index: 10000; position: absolute; right: 15px; top: 5px; } <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <a href="/api-mapper" class="btn btn-default btn-cancel">Cancel</a> <a class="btn btn-success btn-done">Done</a> <!--<img src="{{ \Storage::disk('s3')->url($apiMapperImage->full) }}" width="100%">--> <img src="https://picsum.photos/id/1015/200/300" />0
si su problema simplemente no puede escribir, debe enfocar la entrada
Añadir $("input").focus(); después de pins.push(api);