如何将JavaScript的makehash()哈希值传入Twig作为输入框占位符？

Got it, let's break down why your current setup isn't working and fix it with two solid solutions.

The Root Problem #

Your makehash() function is client-side JavaScript, but Twig (the templating language with {% %} syntax) runs on the server. When Twig renders your HTML, the JS function hasn't even executed yet—so you can't directly plug the JS-generated hash into Twig's attributes object like that.

Solution 1: Generate the Hash Server-Side with Twig (Recommended) #

If you don't strictly need the hash to be generated in the browser, replicate your makehash() logic directly in Twig. This way, the placeholder is set when the page renders, no JS needed.

Here's the modified code:

{# First, generate the 5-character random hash in Twig #}
{% set possible_chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789' %}
{% set generated_hash = '' %}
{% for _ in 0..4 %}
    {% set random_index = random(0, possible_chars|length - 1) %}
    {% set generated_hash = generated_hash ~ possible_chars[random_index] %}
{% endfor %}

{# Now use the generated hash in your attributes #}
{% set attributes = { 
    guuid: { 
        class: option.class, 
        data_errortext: option.errortext, 
        id: key, 
        maxlength: 225, 
        name: name, 
        pattern: (option.pattern and option.pattern not in ['url', 'email']) ? option.pattern : '', 
        placeholder: generated_hash, 
        readonly: option.readonly, 
        required: option.required, 
        title: option.title, 
        type: (option.pattern in ['url', 'email']) ? option.pattern : 'text', 
        value: context.content.get(contentkey)|default(''), 
    } 
} %}

This matches the exact logic of your JS function but runs on the server, so the placeholder is populated immediately when the HTML loads.

Solution 2: Set Placeholder Client-Side with JavaScript #

If you need the hash to be generated in the browser (e.g., for per-user dynamic values), you'll need to wait for the page to load, then use JS to set the placeholder on the input element.

Adjust your code like this:

{% block javascript %}
<script>
function makehash() {
    var hash = "";
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    for (var i = 0; i < 5; i++) {
        hash += possible.charAt(Math.floor(Math.random() * possible.length));
    }
    return hash;
}

// Wait for the DOM to fully load before manipulating elements
document.addEventListener('DOMContentLoaded', function() {
    // Target the input using its ID (you set id: key in attributes)
    const input = document.getElementById('{{ key }}');
    if (input) {
        input.placeholder = makehash();
    }
});
</script>
{% endblock %}

{# Leave placeholder empty or set a fallback in Twig #}
{% set attributes = { 
    guuid: { 
        class: option.class, 
        data_errortext: option.errortext, 
        id: key, 
        maxlength: 225, 
        name: name, 
        pattern: (option.pattern and option.pattern not in ['url', 'email']) ? option.pattern : '', 
        placeholder: 'Loading hash...', {# Optional fallback #}
        readonly: option.readonly, 
        required: option.required, 
        title: option.title, 
        type: (option.pattern in ['url', 'email']) ? option.pattern : 'text', 
        value: context.content.get(contentkey)|default(''), 
    } 
} %}

How this works: After the page finishes loading, the JS finds your input by its ID and sets the placeholder to the result of makehash().

内容的提问来源于stack exchange，提问作者MOTIVECODEX