Ways to utilize CSS for capturing user-inputted text in a text field

Question

Ways to utilize CSS for capturing user-inputted text in a text field

I have a question about incorporating user input text into CSS styling. Specifically, I am looking to create a color background option (#ffffff) where the designer can input their own color and have it displayed once saved in the body background style.

While I have successfully implemented a method for the CSS to display an uploaded image through Liquid on Shopify, I am stuck on how to retain and utilize the user-inputted color code.

The current CSS snippet:

 body {  
  background:{% if settings.use_Site_background %}url('Site_background.jpg'){% endif %} no-repeat /////This is where I need the color code/////// fixed top right; 
}

This is what my Settings section looks like:

 <tr>
  <td><label for="Background_color">Background color</label></td>
  <td><strong>#</strong><input name="Background_color" value="" id="Background_color" type="text" maxlength="6" /></td> 
</tr>

If anyone has suggestions or an easier solution to achieve this, any help would be greatly appreciated!

css background-color shopify liquid

Answer 1

Answer №1

To retrieve the text field value, you can do the following:

var inputText = document.getElementById('Input_text').value

and then incorporate it into your script wherever necessary.

The full script is shown below:

var btn = document.getElementById('submitBtn');
btn.addEventListener('click', submitFunc, false);
function submitFunc(){
    var inputValue = document.getElementById('Input_text').value,
        displayArea = document.getElementById('output-box');
    displayArea.innerText = inputValue;
}

The corresponding HTML code:

<input type="text" id="Input_text" />
<button id="submitBtn">Submit Text</button>
<div id="output-box">
</div>

I also included some basic CSS to ensure the output box is visible:

#output-box{
    width:150px;
    height:50px;
}

Please review this code snippet on http://jsfiddle.net/h5W6j/1

Answer 2

To retrieve the text field value, you can do the following:

var inputText = document.getElementById('Input_text').value

and then incorporate it into your script wherever necessary.

The full script is shown below:

var btn = document.getElementById('submitBtn');
btn.addEventListener('click', submitFunc, false);
function submitFunc(){
    var inputValue = document.getElementById('Input_text').value,
        displayArea = document.getElementById('output-box');
    displayArea.innerText = inputValue;
}

The corresponding HTML code:

<input type="text" id="Input_text" />
<button id="submitBtn">Submit Text</button>
<div id="output-box">
</div>

I also included some basic CSS to ensure the output box is visible:

#output-box{
    width:150px;
    height:50px;
}

Please review this code snippet on http://jsfiddle.net/h5W6j/1

Answer 3

Answer №2

Expanding on Aditya Saxena's response: Check out this jsFiddle example

Don't forget to include this code snippet in your footer:

document.getElementById('someForm').onsubmit = function() {
    var inputColor = document.getElementById('Background_color').value,
        $body = document.getElementsByTagName('body')[0];

    $body.style.backgroundColor = inputColor;
    return false;
};

Answer 4

Expanding on Aditya Saxena's response: Check out this jsFiddle example

Don't forget to include this code snippet in your footer:

document.getElementById('someForm').onsubmit = function() {
    var inputColor = document.getElementById('Background_color').value,
        $body = document.getElementsByTagName('body')[0];

    $body.style.backgroundColor = inputColor;
    return false;
};

Ways to utilize CSS for capturing user-inputted text in a text field

Answer №1

Answer №2

Similar questions

Select options with disabled sorting feature

Issue encountered while attempting to implement custom fonts through CSS

Setting the width of input-group inputs is a feature introduced in Bootstrap 4

Combining Bootstrap with Rails

Discover an effective way to display Ajax search results above a different div element!

Ways to display a Tooltip automatically without needing to hover using only CSS

Ensure that Bootstrap collapse is opened on desktop devices but closed on mobile devices

Gauging Screen Size: A Comparison between Media Queries and JavaScript for Adjusting Div Position

Finding the dynamic width of a div using JavaScript

Is it possible for me to overlap a text over hidden text, and if the hidden text becomes visible through JavaScript, my text will shift to the right of the now visible hidden text?

Generating replicated elements at varying positions

Aligning Content in the Center of a CSS Grid

HTML Multi-Column List Box

Sliding Feature

Avoid vertical clipping issues by utilizing the overflow-y property

Maintain a consistent size for the material UI drawer, preventing it from resizing when the content size fluctuates

What is the best way to distribute stroke width evenly on a rounded hexagon in an SVG?

Is there an easy method for customizing scrollbars?

What could be causing the shadowbox not to display in Internet Explorer?

I am interested in showcasing a card when it is hovered over