8 – How can I add arbitrary placeholder text to form fields?

I am converting an existing site (created by someone else) from Drupal 7 to Drupal 8.

The site above uses the Field Placeholder module to add placeholders to form fields. However, there is still no Drupal 8 version of this module.

I came across the Form Placeholder module, which has a version of Drupal 8, but it won't work for me. (Most significantly, it only allows you to use the field tag as a placeholder; you cannot enter an arbitrary placeholder that is different from the tag.)

Is there another option I can consider?

(I am aware that you could hack something together with jQuery. For various reasons, I would rather not.)

Placeholder text for conditional fields loaded ajax in the registration form

I am using the following provided by @ maruti-mohanty Link to the post
It's working fine, the fields have placeholders, but I got conditional fields (ajax loaded) that when they appear don't have the placeholder text in them. Can I add something to functions.php so that conditional fields can also have placeholders?

First you need to create a js file. I created it in the js folder of my active theme and called it custom.js

then added the following line in this file.

/**
 * Custom js file.
 */

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'User Name');
    jQuery('#user_email').attr('placeholder', 'User Email');
    jQuery('#user_pass').attr('placeholder', 'User Password');
});

The above adds a placeholder such as Username, User Email, and User Password to the input field user_login, user_email, and user_pass respectively. You can change them according to your requirements.

Now you need to add / queue this js file, which you can do by adding following code in active theme functions.php

add_action( 'login_enqueue_scripts', 'wpse_login_enqueue_scripts', 10 );
function wpse_login_enqueue_scripts() {
    wp_enqueue_script( 'custom.js', get_template_directory_uri() . '/js/custom.js', array( 'jquery' ), 1.0 );
}

google sheets – How to replace data from one column in one placeholder to another

Step 1: Create 3 column names like City, address, exit from A4 to C4

Step 2: fill in the city and address you want

Step 3: Choose D4 as the desired EXIT sample text with variable Data_City Y Data_Address

Step 4: use Substitute to replace variables

=SUBSTITUTE(SUBSTITUTE($D$3,"Data_City",A5),"Data_Address",B5)

enter the image description here

Chrome shortcut key for specific marker with placeholder

I'm looking for the fastest way to open a specific bookmark that has a placeholder.

for example:
I have a bookmark: www.subdomain.something- {placeholder} .com
I want to use a hot key, type & # 39; 123 & # 39 ;, hit enter and land at www.subdomain.something-123.com.

Thanks for your help!

The placeholder for the comment form does not display correctly

therefore, the placeholder for the name, email, and website fields in the comment form is displayed above while the fields. It works fine on my other sites. Please what can I do? I use ocean-wp by the way. Thanks for your help!
screenshot of the comment form section on the site

How do I edit the Woocommerce review field placeholder?

Well, here is my problem. I have a WordPress site, Woocommerce is in it, I have products there. All I want to do is add placeholders in the input fields of the review forms. I don't want to add an add-on, I don't want to pay for an add-on.

The first field must be [name], the second field must be [email] and the third field must be your comment.

please help :]

enter the description of the image here

How does the search placeholder text globally change for SharePoint Online?

For SharePoint Online, I'm looking for a way to globally change the text of the search entry placeholder shown in the attached screenshot. Is this possible without having to add a javascript web part on each page?

online search of the sharepoint site

I've tried to play with "Site Settings> Search Settings" before, but when I change that setting it seems that only the search entry "admin" changes, which seems to be a completely different search component with a drop-down menu [second screenshot ].

sharepoint online search settings

Any help is greatly appreciated, thanks!

forms – Entry placeholder: suggestion or example?

How should entry placeholders be used? Should examples be used or is it better to use suggestions? Many times the field label is not enough to describe the type of data. I think sometimes the suggestion is redundant or the label is ambiguous.

Are there any best practices?

Example:

enter the description of the image here

Suggestion:

enter the description of the image here

i18n l10n – How to create phrases in English – pairs of translation placeholder fields?

To help myself and others learn new natural human languages, I want to create a program that provides an easy way to translate common phrases generally available in all of these languages, using these features:

  1. A user has a web page with two or more section labels; each such section contains a heading representing a lingual context
    (in the sense of a group of basic phrases in English, such as conjunction or conditioning)
  2. Every section it contains a single table with columns that contains a th with the innerText Englishand, below, a list of basic phrases in English of the relevant context, which serves as a starting point for translation.
  3. A user can add a new column from the right side of each table of individual columns in English (say Russian`table) and each of these new columns will include translation placeholders through which translations of basic phrases in a chosen language could be entered.
    (after double clicking on a translation placeholder).

A good live, non-Drupal demonstration of this concept is this program (credit to Jhecht for developing that code);
Run the fragment and double click on a translation placeholder to translate a phrase.

const definitions = {
  "if": null,
  "when": null,
  "tomato": null,
};

const tbody = document.querySelector('#definitions');

tbody.addEventListener('dblclick', e => {
  const parent = e.target.parentElement;

  if (parent.tagName !== 'TR' || parent.dataset.editorShown === 'true') return;

  parent.dataset.editorShown = true;

  const dataTd = parent.querySelector('td:last-child');
  const textarea = document.createElement('textarea');
  textarea.classList.add('full');
  textarea.placeholder = "Double click to translate";

  dataTd.replaceChild(textarea, dataTd.firstChild);
  dataTd.firstChild.focus();

});

function blurOrKeypress(e) {
  // split up largely for readability
  if (e.target.tagName !== 'TEXTAREA') return false;
  if (e.type === 'keypress' && e.code != 'Enter' && !e.ctrlKey) return false;


  const parent = e.target.parentElement;
  const row = parent.parentElement;
  const text = document.createTextNode(e.target.value || 'Double click to translate');
  if (e.target.isConnected) {
    parent.replaceChild(text, e.target);
    row.dataset.editorShown = false;
  }

}
// the one thing I miss about jquery event listeners: adding multiple types of event by putting spaces
tbody.addEventListener('keypress', blurOrKeypress);
tbody.addEventListener('focusout', blurOrKeypress);

tbody.append(...Object.entries(definitions).map(((word, translation)) => {

  const tr = document.createElement('tr');
  const keyTd = document.createElement('td');
  const valueTd = document.createElement('td');
  tr.dataset.editorShown = false;

  keyTd.classList.add('bold');
  keyTd.innerText = word;

  valueTd.innerText = translation || 'Double click to translate';
  tr.append(keyTd, valueTd);
  return tr;
}));
/* Styling here to make myself feel better*/
textarea.full {
  height: 1.5rem;
  width: 100%;
  padding: 3px;
  line-height: 1.5rem;
}

.bold {
  font-weight: bold;
}

td.bold {
  font-style: unset;
}

table {
  border-collapse: collapse;
  width: 100%;
}

td {
  color: #111;
  width: 50%;
  border: 1px solid lightgray;
  box-sizing: border-box;
  padding: 5px 10px;
  border-width: 1px 0;
  font-style: italic;
}

th {
  border: 2px solid lightgray;
  border-width: 0 0 2px;
  padding-bottom: 6px;
  text-decoration: underline;
  font-style: unset;
  font-size: 1.15rem;
}

tbody tr:nth-child(odd) {
  background-color: lightgray;
}
Word/Phrase Translation

In Drupal I want to create English phrase – Translation placeholder field pairs
while translation placeholders can be double-clicked and allow translation in situ using the option to save it in the database (for example, by pressing Get in)

How to create such English phrase – Translation placeholder with Drupal?