How to insert an image into a placeholder in an .hbs Ember template file

I'm looking to enhance a .hbs template file in ember by incorporating an image. I am not a developer, but I'm attempting to customize the basic todo list app.

<section class='todoapp'>
  <header id='header'>
    <img src="../assets/logo2.png" />
    {{input type='text'
            class='new-todo'
            placeholder='What else is in your wallet?'
            value=newTitle
            enter='createTodo'}}
  </header>

My objective is to place an image next to the placeholder text before a user interacts with the input field. I'm assuming I can't include it within the 'value' attribute, so would I need to manipulate the .new-todo class in CSS to insert the image?

javascriptcssember.js

Answer №1

Utilize CSS to customize your backgrounds:

background: url('[image-url]') no-repeat; background-position: 10px;

You can adjust the position of the background by altering the pixels.

If you wish to hide the image when the element is focused, use :focus pseudo-class in CSS and set background: none;:

.element-class:hover { background: none; }

Additionally, you have the option to create a div with contenteditable attribute in HTML. By doing this, you can implement a custom placeholder function using JavaScript to add images to the placeholder within the editable element.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Building a static website with the help of Express and making use of a public directory

It seems that I am facing a misunderstanding on how to solve this issue, and despite my efforts in finding an answer, the problem persists. In one of my static sites, the file structure is as follows: --node_modules --index.html --server.js --app.js The ...

javascriptangularjsnode.jsexpress

Error: Module not found '!raw-loader!@types/lodash/common/array.d.ts' or its type declarations are missing

I encountered a typescript error while building my NEXT JS application. The error message was: Type error: Cannot find module '!raw-loader!@types/lodash/common/array.d.ts' Below is the content of my tsConfig.json file: { "compilerOptions& ...

javascripttypescriptnext.js

Challenge encountered in posting a variable generated through ajax

Embarking on my first attempt at utilizing ajax has been quite challenging. Essentially, when an option is selected from the initial field, javascript and xml trigger a php script that generates the next dropdown menu based on information fetched from an S ...

phpjavascriptmysqlxmlajax

Is there a way to verify the custom form when the braintree PayPal checkout button is clicked?

I am seeking a solution to validate a custom PHP form when the Braintree PayPal checkout button is clicked. Currently, the form redirects to the PayPal screen if it is not properly filled out. My goal is to prevent the PayPal popup window from opening if ...

javascriptphppaypalbraintreebraintree-vault

Unable to load JQuery from a div element

My goal is to create a standard .html file containing the navigation, footer, and other elements that will be used across multiple pages for a small site I'm building. I want to keep it simple and avoid using php or other programming languages. I&apo ...

javascriptphpjqueryhtml

Tips on controlling the color of an input field in a form using React

Within my React app, there is a text input field situated inside a form that displays in its default gray color before any interaction: https://i.stack.imgur.com/FdNos.png Once the input field is clicked on, it changes to white as shown here: https://i.s ...

htmlcssformsinput-field

What is the best way to format specific text as bold within an input text field?

I am attempting to make certain text bold within an input text field. However, I'm uncertain about how to achieve this because HTML code is not recognized inside a text field. Therefore, using <b> will not be effective. Is there a way to bold sp ...

javascripthtmltextinputbold

Creating an animated sidebar that moves at a different speed than the rest of the

I have a layout with a large sidebar and small content, where the "Fixed part" refers to sticky positioning. I'm attempting to achieve this using scrollTop, but the sidebar is causing some issues like this: The code should only be executed when the ...

javascriptjqueryhtmlcssfrontend

When attempting to input a value in the middle of the line, the cursor unexpectedly leaps to the end

I have successfully created a code that prevents spaces at the beginning and special characters in an input field. The code is working perfectly, but there is an issue with the cursor moving to the end when trying to type at the beginning or middle of the ...

javascripthtmlreactjs

Is it possible to verify if a user is accessing a webpage through Electron?

If I were interested in creating a basic Electron application that notifies the user upon reaching example.com, is this achievable? If yes, then how can I determine if the user is on a particular webpage? ...

javascriptnpmelectron

Error encountered when attempting to establish a connection between socket.io and express: network error

Similar Question: socket.io: Failed to load resource I'm having trouble getting a simple express + socket.io hello world app to work. I keep receiving the following error: "NetworkError: 404 Not Found - http:// localhost:3002/socket.io/socke ...

javascriptnode.jsexpresssocket.io

Discovering if a div element has children using Selenium IDE

As I begin to automate testing for our website with Selenium IDE, I must admit that I am still learning the ins and outs of it. We utilize highcharts to exhibit data on our site. The challenge arises from the fact that there are 3 div elements handling th ...

htmlcssseleniumhighchartsselenium-ide

What do you call a JavaScript function when it has a name

This code is confusing to me. It's not the usual JavaScript syntax for a function that I know of. Is this a specific function? Or perhaps it's a callback for when an update event occurs? Apologies for these beginner questions, as I am quite new t ...

javascriptfunctionsyntax

The jQuery focusout event is triggered on a form element, even if a child element is clicked within the form

How can I ensure that the focusout event is triggered only when the user is not focusing on the entire form element? Currently, if the user clicks on any of the form's inner elements such as the text field or the button, the event is still being trigg ...

javascriptjquery

Show data based on the chosen destination

Recently, I've been working on creating a simple printer manager to monitor the status of all my printers. Although I have successfully displayed all the data, I'm facing an issue while trying to organize it by location. The error message I keep ...

javascripthtmlasp.netangulartypescript

Tips on slowing down the Jquery UIBlock Plugin

Currently, I am implementing a plugin found at http://jquery.malsup.com/block/#overview. However, I am interested in configuring the blockUI feature to only be displayed if an AJAX request takes longer than 1 second. Otherwise, I would prefer for nothing ...

javascriptjquery

Tips for implementing JWT in a Node.js-based proxy server:

I am a Node.js beginner with a newbie question. I'm not sure if this is the right place to ask, but I need ideas from this community. Here's what I'm trying to do: Server Configurations: Node.js - 4.0.0 Hapi.js - 10.0.0 Redis Scenario: ...

javascriptnode.jsproxy

Display or conceal elements in Angular based on multiple conditions

Looking to develop a functionality where an array of objects can be shown or hidden based on specific filters. The desired output should be as follows: HTML CODE: Filter: <div (click)="filter(1)"> F1 </div> <di ...

javascriptarraysangularfilter

The images on the Shopify platform are becoming increasingly fuzzy

I'm facing an issue where the images I add to my Shopify site using the Brooklyn theme appear blurry unless resized to a small scale. The dimensions of the images are 1748 x 1240 at 300dpi. My intention is to implement a JQuery image slider (lightsli ...

jqueryhtmlcssimageshopify

Upgrading to NPM version 7 or higher: A guide to effectively installing packages using the "lockfileVersion" parameter: 1

After upgrading NodeJS to version 16, I noticed that NPM version 8 is now included. This means that when I install packages, the package-lock.json file is generated with a "lockfileVersion": 2. However, I prefer the older format of "lockfileVersion": 1. ...

javascriptnode.jsnpmpackage-lock.json