X
Tap here to go to the mobile version of the site.

Support Forum

Contenteditable cannot click into

Posted

I have code : <td>&spades;<span contenteditable="true" id='NS'></span> I can tab into the span field, but if I click on it I cannot edit it. Problem goes away if there is something in the field

I have code : &lt;td&gt;&amp;spades;&lt;span contenteditable="true" id='NS'&gt;&lt;/span&gt; I can tab into the span field, but if I click on it I cannot edit it. Problem goes away if there is something in the field

Modified by cor-el

Additional System Details

Installed Plug-ins

  • Shockwave Flash 31.0 r0

Application

  • Firefox 64.0
  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:64.0) Gecko/20100101 Firefox/64.0
  • Support URL: https://support.mozilla.org/1/firefox/64.0/WINNT/en-US/

Extensions

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: Intel(R) G45/G43 Express Chipset (Microsoft Corporation - WDDM 1.1)
  • adapterDescription2:
  • adapterDeviceID: 0x2e22
  • adapterDeviceID2:
  • adapterDrivers: igdumd64 igd10umd64 igdumd32 igd10umd32
  • adapterDrivers2:
  • adapterRAM: Unknown
  • adapterRAM2:
  • adapterSubsysID: 02511025
  • adapterSubsysID2:
  • adapterVendorID: 0x8086
  • adapterVendorID2:
  • contentUsesTiling: True
  • crashGuards: []
  • direct2DEnabled: False
  • direct2DEnabledMessage: [u'blockedGfxCard']
  • directWriteEnabled: True
  • directWriteVersion: 10.0.16299.755
  • driverDate: 3-11-2013
  • driverDate2:
  • driverVersion: 8.15.10.2702
  • driverVersion2:
  • failures: [u'CP+[GFX1-]: [D2D1.1] Failed to obtain a device for DrawTargetD2D1::Init(ID3D11Texture2D*, SurfaceFormat).', u'CP+[GFX1-]: Could not borrow DrawTarget (D3D11) 0', u'CP+[GFX1-]: [D2D1.1] Failed to obtain a device for DrawTargetD2D1::Init(ID3D11Texture2D*, SurfaceFormat).', u'CP+[GFX1-]: Could not borrow DrawTarget (D3D11) 0']
  • featureLog: {u'fallbacks': [], u'features': [{u'status': u'available', u'description': u'Compositing', u'name': u'HW_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'available', u'description': u'Direct3D11 Compositing', u'name': u'D3D11_COMPOSITING', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'blacklisted', u'description': u'Direct2D', u'name': u'DIRECT2D', u'log': [{u'status': u'available', u'type': u'default'}, {u'status': u'blacklisted', u'message': u'#BLOCKLIST_FEATURE_FAILURE_1180379', u'type': u'env'}]}, {u'status': u'blacklisted', u'description': u'Direct3D11 hardware ANGLE', u'name': u'D3D11_HW_ANGLE', u'log': [{u'status': u'available', u'type': u'default'}, {u'status': u'blacklisted', u'message': u'#BLOCKLIST_FEATURE_FAILURE_BUG_1153381', u'type': u'env'}]}, {u'status': u'available', u'description': u'GPU Process', u'name': u'GPU_PROCESS', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'unavailable', u'description': u'WebRender', u'name': u'WEBRENDER', u'log': [{u'status': u'opt-in', u'message': u'WebRender is an opt-in feature', u'type': u'default'}, {u'status': u'unavailable', u'message': u'ANGLE is disabled', u'type': u'runtime'}]}, {u'status': u'blocked', u'description': u'WebRender qualified', u'name': u'WEBRENDER_QUALIFIED', u'log': [{u'status': u'available', u'type': u'default'}, {u'status': u'blocked', u'message': u'Not Nvidia', u'type': u'env'}]}, {u'status': u'available', u'description': u'Off Main Thread Painting', u'name': u'OMTP', u'log': [{u'status': u'available', u'type': u'default'}]}, {u'status': u'available', u'description': u'Advanced Layers', u'name': u'ADVANCED_LAYERS', u'log': [{u'status': u'available', u'type': u'default'}]}]}
  • indices: [0, 1, 2, 3]
  • info: {u'AzureContentBackend (UI Process)': u'skia', u'AzureCanvasBackend (UI Process)': u'skia', u'ApzWheelInput': 1, u'ApzDragInput': 1, u'ApzKeyboardInput': 1, u'AzureFallbackCanvasBackend (UI Process)': u'cairo', u'ApzAutoscrollInput': 1, u'AzureCanvasAccelerated': 0, u'AzureCanvasBackend': u'skia', u'AzureContentBackend': u'skia'}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • offMainThreadPaintEnabled: True
  • offMainThreadPaintWorkerCount: 1
  • usesTiling: False
  • webgl1DriverExtensions: GL_ANGLE_client_arrays GL_ANGLE_explicit_context GL_ANGLE_explicit_context_gles1 GL_ANGLE_framebuffer_blit GL_ANGLE_framebuffer_multisample GL_ANGLE_instanced_arrays GL_ANGLE_lossy_etc_decode GL_ANGLE_pack_reverse_row_order GL_ANGLE_program_cache_control GL_ANGLE_request_extension GL_ANGLE_robust_client_memory GL_ANGLE_texture_compression_dxt3 GL_ANGLE_texture_compression_dxt5 GL_ANGLE_texture_usage GL_ANGLE_translated_shader_source GL_CHROMIUM_bind_generates_resource GL_CHROMIUM_bind_uniform_location GL_CHROMIUM_color_buffer_float_rgb GL_CHROMIUM_color_buffer_float_rgba GL_CHROMIUM_copy_compressed_texture GL_CHROMIUM_copy_texture GL_CHROMIUM_sync_query GL_EXT_blend_minmax GL_EXT_color_buffer_half_float GL_EXT_debug_marker GL_EXT_discard_framebuffer GL_EXT_disjoint_timer_query GL_EXT_draw_buffers GL_EXT_frag_depth GL_EXT_map_buffer_range GL_EXT_occlusion_query_boolean GL_EXT_read_format_bgra GL_EXT_robustness GL_EXT_sRGB GL_EXT_shader_texture_lod GL_EXT_texture_compression_dxt1 GL_EXT_texture_compression_s3tc_srgb GL_EXT_texture_filter_anisotropic GL_EXT_texture_format_BGRA8888 GL_EXT_texture_storage GL_EXT_unpack_subimage GL_KHR_debug GL_KHR_parallel_shader_compile GL_KHR_robust_buffer_access_behavior GL_NV_EGL_stream_consumer_external GL_NV_fence GL_NV_pack_subimage GL_NV_pixel_buffer_object GL_OES_EGL_image GL_OES_EGL_image_external GL_OES_compressed_ETC1_RGB8_texture GL_OES_depth32 GL_OES_element_index_uint GL_OES_get_program_binary GL_OES_mapbuffer GL_OES_packed_depth_stencil GL_OES_rgb8_rgba8 GL_OES_standard_derivatives GL_OES_surfaceless_context GL_OES_texture_float GL_OES_texture_half_float GL_OES_texture_half_float_linear GL_OES_texture_npot GL_OES_vertex_array_object OES_compressed_EAC_R11_signed_texture OES_compressed_EAC_R11_unsigned_texture OES_compressed_EAC_RG11_signed_texture OES_compressed_EAC_RG11_unsigned_texture OES_compressed_ETC2_RGB8_texture OES_compressed_ETC2_RGBA8_texture OES_compressed_ETC2_punchthroughA_RGBA8_texture OES_compressed_ETC2_punchthroughA_sRGB8_alpha_texture OES_compressed_ETC2_sRGB8_alpha8_texture OES_compressed_ETC2_sRGB8_texture
  • webgl1Extensions: ANGLE_instanced_arrays EXT_blend_minmax EXT_color_buffer_half_float EXT_frag_depth EXT_sRGB EXT_shader_texture_lod EXT_texture_filter_anisotropic EXT_disjoint_timer_query OES_element_index_uint OES_standard_derivatives OES_texture_float OES_texture_half_float OES_texture_half_float_linear OES_vertex_array_object WEBGL_color_buffer_float WEBGL_compressed_texture_s3tc WEBGL_compressed_texture_s3tc_srgb WEBGL_debug_renderer_info WEBGL_debug_shaders WEBGL_draw_buffers WEBGL_lose_context
  • webgl1Renderer: Google Inc. -- ANGLE (Intel(R) G45/G43 Express Chipset (Microsoft Corporation - WDDM 1.1) Direct3D11 vs_4_0 ps_4_0)
  • webgl1Version: OpenGL ES 2.0 (ANGLE 2.1.0.790e8e6b4179)
  • webgl1WSIInfo: EGL_VENDOR: Google Inc. (adapter LUID: 000000000000b035) EGL_VERSION: 1.4 (ANGLE 2.1.0.790e8e6b4179) EGL_EXTENSIONS: EGL_EXT_create_context_robustness EGL_ANGLE_d3d_share_handle_client_buffer EGL_ANGLE_d3d_texture_client_buffer EGL_ANGLE_surface_d3d_texture_2d_share_handle EGL_ANGLE_query_surface_pointer EGL_ANGLE_window_fixed_size EGL_ANGLE_keyed_mutex EGL_ANGLE_surface_orientation EGL_ANGLE_direct_composition EGL_NV_post_sub_buffer EGL_KHR_create_context EGL_EXT_device_query EGL_KHR_image EGL_KHR_image_base EGL_KHR_gl_texture_2D_image EGL_KHR_gl_texture_cubemap_image EGL_KHR_gl_renderbuffer_image EGL_KHR_get_all_proc_addresses EGL_KHR_stream EGL_KHR_stream_consumer_gltexture EGL_NV_stream_consumer_gltexture_yuv EGL_ANGLE_flexible_surface_compatibility EGL_ANGLE_stream_producer_d3d_texture EGL_ANGLE_create_context_webgl_compatibility EGL_CHROMIUM_create_context_bind_generates_resource EGL_CHROMIUM_sync_control EGL_EXT_pixel_format_float EGL_KHR_surfaceless_context EGL_ANGLE_display_texture_share_group EGL_ANGLE_create_context_client_arrays EGL_ANGLE_program_cache_control EGL_ANGLE_robust_resource_initialization EGL_ANGLE_create_context_extensions_enabled EGL_MOZ_create_context_provoking_vertex_dont_care EGL_EXTENSIONS(nullptr): EGL_EXT_client_extensions EGL_EXT_platform_base EGL_EXT_platform_device EGL_ANGLE_platform_angle EGL_ANGLE_platform_angle_d3d EGL_ANGLE_device_creation EGL_ANGLE_device_creation_d3d11 EGL_ANGLE_experimental_present_path EGL_KHR_client_get_all_proc_addresses EGL_KHR_debug EGL_ANGLE_explicit_context
  • webgl2DriverExtensions: -
  • webgl2Extensions: -
  • webgl2Renderer: WebGL creation failed: * tryANGLE * Exhausted GL driver options.
  • webgl2Version: -
  • webgl2WSIInfo: -
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11
  • windowUsingAdvancedLayers: True

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
jscher2000
  • Top 10 Contributor
8684 solutions 70998 answers

Helpful Reply

Col_Boogie said

<td>♠<span contenteditable="true" id='NS'></span>

Should it be possible to move the cursor into an empty span if the containing element is not contenteditable? Hmm, that isn't mentioned here:

https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable

If Firefox isn't following web standards, that would be a good argument for fixing it. Otherwise, it would probably considered an optional fix.

What does Chrome do?

''Col_Boogie [[#question-1244923|said]]'' <blockquote> <td>&spades;&lt;span contenteditable="true" id='NS'>&lt;/span> </blockquote> Should it be possible to move the cursor into an empty span if the containing element is not contenteditable? Hmm, that isn't mentioned here: https://developer.mozilla.org/docs/Web/API/HTMLElement/contentEditable If Firefox isn't following web standards, that would be a good argument for fixing it. Otherwise, it would probably considered an optional fix. What does Chrome do?

Question owner

Checked Chrome: If I click just after the card suit, it works. Also note that for Firefox, if I click just before the suit, I can then tab to the editable field. I tried adding: span {spellcheck="false"; min-width:3em} no help. Note the spellcheck="false"; is ignored. I have to right click screen to turn it off.

Checked Chrome: If I click just after the card suit, it works. Also note that for Firefox, if I click just before the suit, I can then tab to the editable field. I tried adding: span {spellcheck="false"; min-width:3em} no help. Note the spellcheck="false"; is ignored. I have to right click screen to turn it off.
cor-el
  • Top 10 Contributor
  • Moderator
17467 solutions 157838 answers

Helpful Reply

spellcheck="false" would be an attribute like contenteditable="true" and thus not part of a style rule.

spellcheck="false" would be an attribute like contenteditable="true" and thus not part of a style rule.

Question owner

Sorry, you are right about spellcheck. Sometimes I wish there were HTML style-attribute rules. Would save a lot of coding. Maybe <HTML-attributes> ... </HTML-attributes> and <... style="...; HTML: attribute1, attribute2, etc."

Sorry, you are right about spellcheck. Sometimes I wish there were HTML style-attribute rules. Would save a lot of coding. Maybe <HTML-attributes> ... </HTML-attributes> and <... style="...; HTML: attribute1, attribute2, etc."