placeholder – devfrontend.info

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

23/06/2020 / admin

Testé fonctionnel Magento 2.3, 2.4

Magento 2 Dev Docs – Custom form validation
Autre propos (pas top en terme d’UI, mais peut servir dans un autre cas d’override): DOB Validation with three fields in magento2
Magento 2 Get Current Store Date Time

Nous allons supprimer le widget calendar du champ date de naissance du formulaire de création de compte de Magento 2.
Attention: le champ Date de Naissance n’apparaît pas par défaut! Il faut l’activer via l’interface d’administration (Google est ton ami).

Demo en ligne de Cleave.js.

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

Apporter plus d’attention au passages suivants:

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' sur l'input type="text" permet la bonne validation de votre champ Date de Naissance
<script>require(['cleave'... qui initialise le masque de saisie sur le champ via le plugin Cleave.js

<?php
/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();
$fieldCssClass .= $block->isRequired() ? ' required' : '';
?>
<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">
    <label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>
    <div class="control customer-dob">
        <input type="text"
               name="dob"
               id="dob"
               placeholder="jj/mm/aaaa"
               data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />
        <?php if ($_message = $block->getAdditionalDescription()) : ?>
            <div class="note"><?= $block->escapeHtml($_message) ?></div>
        <?php endif; ?>
    </div>
</div>

<script>
    require([
        'cleave'
    ], function (Cleave) {
        var cleave = new Cleave('#dob', {
            date: true,
            delimiter: '/',
            datePattern: ['d', 'm', 'Y']
        });
    });
</script>

<?php

/** @var \Magento\Customer\Block\Widget\Dob $block */

$fieldCssClass = 'field date field-' . $block->getHtmlId();

$fieldCssClass .= $block->isRequired() ? ' required' : '';

<div class="<?= $block->escapeHtmlAttr($fieldCssClass) ?>">

<label class="label" for="<?= /* @noEscape */ $block->getHtmlId() ?>"><span><?= $block->escapeHtml($block->getStoreLabel('dob')) ?></span></label>

<input type="text"

name="dob"

id="dob"

placeholder="jj/mm/aaaa"

data-validate='{"required":true, "validate-date": {"dateFormat": "dd\/MM\/y"}, "validate-dob": true}' />

<?php if ($_message = $block->getAdditionalDescription()) : ?>

<div class="note"><?= $block->escapeHtml($_message) ?></div>

<?php endif; ?>

</div>

require([

'cleave'

], function (Cleave) {

var cleave = new Cleave('#dob', {

date: true,

delimiter: '/',

datePattern: ['d', 'm', 'Y']

});

</script>

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

var config = {
    map: {
        "*": {
            cleave: 'js/vendor/cleave/dist/cleave.min'
        }
    },
    [...]
};

var config = {

map: {

"*": {

cleave: 'js/vendor/cleave/dist/cleave.min'

}

[...]

};

Import des sources de Cleave.js dans le projet:

Au moment où j’ai mise en place cette fonctionnalité, la dernière version tagguée de Cleave.js était la v1.6.0, mais n’hésitez pas à mettre à jour avec une version supérieure si existante!

Placez la source minifiée dans app/design/frontend/MyVendor/mytheme/web/js/vendor/cleave/dist/cleave.min.js.

[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)

09/06/2015 / admin

Source : Support glyph and fa icon inside input.

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Afin que l’icône s’affiche correctement, (il semble que) la structure HTML doivent obligatoirement comporter des <div class="row"><div class="classes-de-votre-grille placeholder-icon"> englobants :

<div class="row">
  <div class="twelve columns placeholder-icon">
    <input type="text" id="<?php echo $this->getFieldId('company') ?>"
           name="<?php echo $this->getFieldName('company') ?>"
           value="<?php echo $this->escapeHtml($this->getObject()->getCompany()) ?>"
           title="<?php echo $this->__('Company') ?>"
           class="input-cartegie input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?> input-lg"
           <?php echo $this->getFieldParams() ?>
           placeholder="<?php echo $this->__('Company') ?>"
           />
    <label for="<?php echo $this->getFieldId('company') ?>" class="fa fa-building-o" rel="tooltip" title="<?php echo $this->getStoreLabel('company') ?>"></label>
  </div>
</div>

<input type="text" id="<?php echo $this->getFieldId('company') ?>"

name="<?php echo $this->getFieldName('company') ?>"

value="<?php echo $this->escapeHtml($this->getObject()->getCompany()) ?>"

title="<?php echo $this->__('Company') ?>"

class="input-cartegie input-text <?php echo $this->helper('customer/address')->getAttributeValidationClass('company') ?> input-lg"

<?php echo $this->getFieldParams() ?>

placeholder="<?php echo $this->__('Company') ?>"

<label for="<?php echo $this->getFieldId('company') ?>" class="fa fa-building-o" rel="tooltip" title="<?php echo $this->getStoreLabel('company') ?>"></label>

</div>

La classe .icon-addon pouvant entrer en conflit avec d’autres styles affectés à des classes plus génériques de type icon-, j’ai préféré changer le libellé en .placeholder-icon.

.placeholder-icon {
    position: relative;
    display: block;
}

.placeholder-icon:after,
.placeholder-icon:before {
    display: table;
    content: " ";
}

.placeholder-icon .glyphicon,
.placeholder-icon .fa {
    position: absolute;
    z-index: 2;
    left: 10px;
    font-size: $baseFontSize + 4;
    width: 20px;
    text-align: center;
    padding: 10px 0;
    top: $baseFontSize + 4;
    color: $placeholderColor;
}

.placeholder-icon .input-text {
    padding-left: 28px;
}

.placeholder-icon {

position: relative;

display: block;

}

.placeholder-icon:after,

.placeholder-icon:before {

display: table;

content: " ";

}

.placeholder-icon .glyphicon,

.placeholder-icon .fa {

position: absolute;

z-index: 2;

left: 10px;

font-size: $baseFontSize + 4;

width: 20px;

text-align: center;

padding: 10px 0;

top: $baseFontSize + 4;

color: $placeholderColor;

}

.placeholder-icon .input-text {

padding-left: 28px;

}

Code HTML/CSS de la démo initiale :

<div class="container">
	<div class="row" style="margin-top: 5%">
        <div class="col-md-5">
            <div class="form-group">
                <div class="icon-addon addon-md">
                    <input type="text" placeholder="Email" class="form-control" id="email">
                    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                </div>
            </div>
            <div class="form-group">
                <div class="icon-addon addon-md">
                    <select class="form-control">
                        <option>Select Option</option>
                        <option>Sample</option>
                        <option>Sample</option>
                    </select>
                    <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group input-group-md">
                    <span class="input-group-addon"><i class="glyphicon glyphicon-filter"></i></span>
                    <div class="icon-addon addon-md">
                        <input type="text" placeholder="Email" class="form-control" id="email">
                        <label for="email" class="glyphicon glyphicon-search" rel="tooltip" title="email"></label>
                    </div>
                    <span class="input-group-btn">
                        <button class="btn btn-default" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

<option>Select Option</option>

<option>Sample</option>

</select>

</div>

</div>

</span>

</div>

.center-block {
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.input-group .icon-addon .form-control {
    border-radius: 0;
}

.icon-addon {
    position: relative;
    color: #555;
    display: block;
}

.icon-addon:after,
.icon-addon:before {
    display: table;
    content: " ";
}

.icon-addon:after {
    clear: both;
}

.icon-addon.addon-md .glyphicon,
.icon-addon .glyphicon, 
.icon-addon.addon-md .fa,
.icon-addon .fa {
    position: absolute;
    z-index: 2;
    left: 10px;
    font-size: 14px;
    width: 20px;
    margin-left: -2.5px;
    text-align: center;
    padding: 10px 0;
    top: 1px
}

.icon-addon.addon-lg .form-control {
    line-height: 1.33;
    height: 46px;
    font-size: 18px;
    padding: 10px 16px 10px 40px;
}

.icon-addon.addon-sm .form-control {
    height: 30px;
    padding: 5px 10px 5px 28px;
    font-size: 12px;
    line-height: 1.5;
}

.icon-addon.addon-lg .fa,
.icon-addon.addon-lg .glyphicon {
    font-size: 18px;
    margin-left: 0;
    left: 11px;
    top: 4px;
}

.icon-addon.addon-md .form-control,
.icon-addon .form-control {
    padding-left: 30px;
    float: left;
    font-weight: normal;
}

.icon-addon.addon-sm .fa,
.icon-addon.addon-sm .glyphicon {
    margin-left: 0;
    font-size: 12px;
    left: 5px;
    top: -1px
}

.icon-addon .form-control:focus + .glyphicon,
.icon-addon:hover .glyphicon,
.icon-addon .form-control:focus + .fa,
.icon-addon:hover .fa {
    color: #2580db;
}

.center-block {

float: none;

margin-left: auto;

margin-right: auto;

}

.input-group .icon-addon .form-control {

border-radius: 0;

}

.icon-addon {

position: relative;

color: #555;

display: block;

}

.icon-addon:after,

.icon-addon:before {

display: table;

content: " ";

}

.icon-addon:after {

clear: both;

}

.icon-addon.addon-md .glyphicon,

.icon-addon .glyphicon,

.icon-addon.addon-md .fa,

.icon-addon .fa {

position: absolute;

z-index: 2;

left: 10px;

font-size: 14px;

width: 20px;

margin-left: -2.5px;

text-align: center;

padding: 10px 0;

top: 1px

}

.icon-addon.addon-lg .form-control {

line-height: 1.33;

height: 46px;

font-size: 18px;

padding: 10px 16px 10px 40px;

}

.icon-addon.addon-sm .form-control {

height: 30px;

padding: 5px 10px 5px 28px;

font-size: 12px;

line-height: 1.5;

}

.icon-addon.addon-lg .fa,

.icon-addon.addon-lg .glyphicon {

font-size: 18px;

margin-left: 0;

left: 11px;

top: 4px;

}

.icon-addon.addon-md .form-control,

.icon-addon .form-control {

padding-left: 30px;

float: left;

font-weight: normal;

}

.icon-addon.addon-sm .fa,

.icon-addon.addon-sm .glyphicon {

margin-left: 0;

font-size: 12px;

left: 5px;

top: -1px

}

.icon-addon .form-control:focus + .glyphicon,

.icon-addon:hover .glyphicon,

.icon-addon .form-control:focus + .fa,

.icon-addon:hover .fa {

color: #2580db;

}

[CSS] Styler un Placeholder

28/10/2014 / admin

Source: http://css-tricks.com/almanac/selectors/p/placeholder/

Remarque : à priori, il faut mettre la mention !important derrière chaque déclaration pour qu’elles soient prises en compte.

::-webkit-input-placeholder {
   color: red;
}

:-moz-placeholder { /* Firefox 18- */
   color: red;  
}

::-moz-placeholder {  /* Firefox 19+ */
   color: red;  
}

:-ms-input-placeholder {  
   color: red;  
}

::-webkit-input-placeholder {

color: red;

}

:-moz-placeholder { /* Firefox 18- */

color: red;

}

::-moz-placeholder { /* Firefox 19+ */

color: red;

}

:-ms-input-placeholder {

color: red;

}

Utilisateurs de préprocesseurs type LESS, SASS, attention : les pseudo-éléments ci-dessus ne fonctionnent pas si le code est factorisé. Déclarer les styles comme ci-dessous :

input {
    &::-webkit-input-placeholder {
        font-style: italic;
    }

    &:-moz-placeholder { /* Firefox 18- */
        font-style: italic;
    }

    &::-moz-placeholder {  /* Firefox 19+ */
        font-style: italic;
    }

    &:-ms-input-placeholder {
        font-style: italic;
    }
}

input {

&::-webkit-input-placeholder {

font-style: italic;

}

&:-moz-placeholder { /* Firefox 18- */

font-style: italic;

}

&::-moz-placeholder { /* Firefox 19+ */

font-style: italic;

}

&:-ms-input-placeholder {

font-style: italic;

}

[jQuery] Simuler un placeholder

07/04/2014 / admin

jQuery(document).ready(function() {
  var solrsearchfield = jQuery("#keywords");
  if(solrsearchfield.val() == '')
  {
    solrsearchfield.val('Rechercher');
    jQuery(this).addClass('has-placeholder');
  }

  solrsearchfield.blur(function(){
    if (jQuery(this).val() == '')
    {
      jQuery(this).val('Rechercher');
      jQuery(this).addClass('has-placeholder');
    }
  });
  solrsearchfield.focus(function(){
    if (jQuery(this).val() == 'Rechercher')
    {
      jQuery(this).val('');
      jQuery(this).removeClass('has-placeholder');
    }
  });
});

jQuery(document).ready(function() {

var solrsearchfield = jQuery("#keywords");

if(solrsearchfield.val() == '')

{

solrsearchfield.val('Rechercher');

jQuery(this).addClass('has-placeholder');

}

solrsearchfield.blur(function(){

if (jQuery(this).val() == '')

{

jQuery(this).val('Rechercher');

jQuery(this).addClass('has-placeholder');

}

});

solrsearchfield.focus(function(){

if (jQuery(this).val() == 'Rechercher')

{

jQuery(this).val('');

jQuery(this).removeClass('has-placeholder');

}

});

<input id="keywords" class="has-placeholder" type="text" />

1	<input id="keywords" class="has-placeholder" type="text" />

.has-placeholder{
  color: red !important;
}

.has-placeholder{

color: red !important;

}

[jQuery] Déplacer les textes des étiquettes Label de formulaire vers les attributs Placeholder des champs Input associés

05/04/2013 / admin

Simulation : http://jsfiddle.net/frontenddeveloper/ZXxXH/1/

jQuery('input.textfield').each(function(){
    var get_label = jQuery(this).prev('label').text();
    jQuery(this).attr('placeholder', ''+get_label+'');
});

jQuery('input.textfield').each(function(){

var get_label = jQuery(this).prev('label').text();

jQuery(this).attr('placeholder', ''+get_label+'');

});

Articles récents

Catégories

Archives

Méta

Étiquette : placeholder

[Magento 2] Un champ Date de Naissance custom avec validation côté javascript, placeholder et masque de saisie avec le plugin Cleave

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`:

Import des sources de Cleave.js dans le projet:

[CSS] Afficher des icônes issus d’une police dans des champs de formulaire (notamment ceux de Bootstrap)

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Code HTML/CSS de la démo initiale :

[CSS] Styler un Placeholder

[jQuery] Simuler un placeholder

[jQuery] Déplacer les textes des étiquettes Label de formulaire vers les attributs Placeholder des champs Input associés

app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml:

app/design/frontend/MyVendor/mytheme/requirejs-config.js:

Import des sources de Cleave.js dans le projet:

Code CSS réduit (mis en place dans un Magento avec Font Awesome comme bibliothèque d’icônes) :

Code HTML/CSS de la démo initiale :

`app/design/frontend/MyVendor/mytheme/Magento_Customer/templates/widget/dob.phtml`:

`app/design/frontend/MyVendor/mytheme/requirejs-config.js`: