256 Kilobytes

Answers in Client-Side | By August R. Garcia

Published 2 months agoFri, 09 Aug 2019 19:14:14 -0700 | Last update 2 months agoFri, 09 Aug 2019 19:18:12 -0700

124 views, 0 RAMs, and 1 comment

Tags: JavaScript, Textareas, Inputs

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 191 🗨 944 🐏 287
Site Owner

While this can't be done with an <input>, a <textarea> can be reworked fairly easily to allow for this behavior. See below.

Demo

Source Code

<form id="test_form">
<textarea onkeydown="nl_to_comma(event, this);" onpaste="nl_to_comma(event, this);" rows="1" style="width:90%;resize:none;scroll:none;overflow:hidden;" placeholder="Keywords, Comma Separated"></textarea>
<button type="submit">Submit</button>
</form>
<script>

function nl_to_comma(event, el) {
  if (typeof event.keyCode !== 'undefined') {  
    // Newlines -> Commas
    el.value = el.value.replace(/\n/g, ', '); 

    // Bonus: Tabs -> Commas
    el.value = el.value.replace(/\t/g, ', '); 

    // Also Bonus: Remove duplicate commas
    el.value = el.value.replace(/,,/g, ','); 
    // If Enter/Return is pressed, submit the form
    if ( event.keyCode == 13 ) {  
      document.getElementById("test_form").submit(); 
      // You can alternatively use this to submit the first form on the page
      // Use an actual ID if there is more than one form 
      // document.forms[0].submit()
    }
  } else { 
    // On paste, wait for the paste to finish before running the replace
    setTimeout(function(){
      el.value = el.value.replace(/\n/g, ', '); 
      el.value = el.value.replace(/\t/g, ', '); 
      el.value = el.value.replace(/,,/g, ','); 
    }, 0);
  }
}
</script>
Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago

Edit History

• [2019-08-09 19:14 PDT] August R. Garcia (2 months ago)
• [2019-08-09 19:14 PDT] August R. Garcia (2 months ago)
• [2019-08-09 19:14 PDT] August R. Garcia (2 months ago)
• [2019-08-09 19:14 PDT] August R. Garcia (2 months ago)
🕓 Posted at 09 August, 2019 19:14 PM PDT

Sir, I can do you a nice SEO.

Profile Photo - August R. Garcia August R. Garcia LARPing as a Sysadmi... Portland, OR
🗎 191 🗨 944 🐏 287
Site Owner

Can add a few more regex lines to trim empty commas:

      el.value = el.value.replace(/\n/g, ', '); 
      el.value = el.value.replace(/\t/g, ', '); 

      el.value = el.value.replace(/,,/g, ','); 

      // Trim commas with no string before them (e.g., if blank newlines are pasted in)
      el.value = el.value.replace(/ ,/g, '' ); 
      el.value = el.value.replace(/^, /g, ''); 
Download more RAM. 🐏 ⨉ 0 Posted by August R. Garcia 2 months ago 🕓 Posted at 09 August, 2019 19:44 PM PDT

Sir, I can do you a nice SEO.

Post a New Comment

To leave a comment, login to your account or create an account.

Do you like having a good time?

Read Quality Articles

Read some quality articles. If you can manage to not get banned for like five minutes, you can even post your own articles.

View Articles →

Argue with People on the Internet

Use your account to explain why people are wrong on the Internet forum.

View Forum →

Vandalize the Wiki

Or don't. I'm not your dad.

View Wiki →

Ask and/or Answer Questions

If someone asks a terrible question, post a LMGTFY link.

View Answers →

Make Some Money

Hire freelancers and/or advertise your goods and/or services. Hire people directly. We're not a middleman or your dad. Manage your own business transactions.

Register an Account
You can also login to an existing account or recover your password. All use of this site is subject to terms outlined in the terms of service and privacy policy.