Preserve and Display Text Exactly How It Is Typed and Submitted

Preserve and display text exactly how it is typed and submitted

1. Make sure Magic Quotes are off or, if you can't disable them, cleanse your strings from them. Read the manual for details: http://www.php.net/manual/en/security.magicquotes.php
2. When inserting your text into the database, escape it properly for SQL syntax once or, better, use prepared statements. See How can I prevent SQL injection in PHP? and The Great Escapism (Or: What You Need To Know To Work With Text Within Text).
3. When outputting to HTML, use htmlspecialchars to avoid HTML injection or plain syntax problems and afterwards use nl2br to format line breaks specifically for HTML.

That's basically it.

How do I preserve line breaks when getting text from a textarea?

The easiest solution is to simply style the element you're inserting the text into with the following CSS property:

white-space: pre-wrap;

This property causes whitespace and newlines within the matching elements to be treated in the same way as inside a <textarea>. That is, consecutive whitespace is not collapsed, and lines are broken at explicit newlines (but are also wrapped automatically if they exceed the width of the element).

Given that several of the answers posted here so far have been vulnerable to HTML injection (e.g. because they assign unescaped user input to innerHTML) or otherwise buggy, let me give an example of how to do this safely and correctly, based on your original code:

document.getElementById('post-button').addEventListener('click', function () {  var post = document.createElement('p');  var postText = document.getElementById('post-text').value;  post.append(postText);  var card = document.createElement('div');  card.append(post);  var cardStack = document.getElementById('card-stack');  cardStack.prepend(card);});

#card-stack p {  background: #ddd;  white-space: pre-wrap;  /* <-- THIS PRESERVES THE LINE BREAKS */}textarea {  width: 100%;}

<textarea id="post-text" class="form-control" rows="8" placeholder="What's up?" required>Group Schedule:
Tuesday practice @ 5th floor (8pm - 11 pm)
Thursday practice @ 5th floor (8pm - 11 pm)
Sunday practice @ (9pm - 12 am)</textarea><br><input type="button" id="post-button" value="Post!"><div id="card-stack"></div>

how to display the text from text field on the screen by clicking button on React

You can start by creating a hook to handle text changes: const [text, setText] = useState("");. Then you can create a function to handle the submission of the form and trigger it on submit of the form. This function will prevent the page from reloading using event.preventDefault() and then use the hook from above to change the text of an element using the text inside the form (defined as event.target[0].value).

Full code:

import React, { useState } from "react";

function App() {
  const [text, setText] = useState("");
  const handleSubmit = (event) => {
    event.preventDefault();
    setText(event.target[0].value);
  };

  return (
    <div className="App">
      <form onSubmit={handleSubmit}>
        <input type="text" />
        <button type="submit">Submit</button>
      </form>
      <h1>{text}</h1>
    </div>
  );
}

export default App;

How do you display code snippets in MS Word preserving format and syntax highlighting?

Here is the best way, for me, to add code inside word:

1. Go to Insert tab, Text section, click Object button (it's on the right)
2. Choose OpenDocument Text which will open a new embedded word document
3. Copy and paste your code from Visual Studio / Eclipse inside this embedded word page
4. Save and close

Advantages

The result looks very nice. Here are the advantages of this method:

• The code keeps its original layout and colors
• The code is separated from the rest of the document, as if it was a picture or a chart
• Spelling errors won't be highlighted in the code (this is cool !)

And it takes only few seconds.

Preserve line breaks in textarea

Generally you just need to add

• white-space: pre-line; whitespace trimmed to single whitespace or

• white-space: pre-wrap; all whitespace preserved

to the element's style (CSS), where you want your text rendered with line-breaks.

input[type=text] submit different value than displayed

Try using the combobox functionality for the jQuery UI Autocomplete:

http://jqueryui.com/demos/autocomplete/#combobox

The value attribute of the options are what get sent along with the form, not the display text.

Display user input value upon submit in react

You can use an additional state variable to store the "submitted text". You would update that new state variable with the text from the enteredText state variable before emptying it. You could also make sure the "submitted text" has a value before displaying it.

I am including code that does what I described, but you can also try implementing it on your own before looking at it:

import React, { useState } from "react";
import "./styles.css";

export default function App() {
  const [enteredText, setEnteredText] = useState("");
  const [submittedText, setSubmittedText] = useState(null);
  const textChangeHandler = (i) => {
    setEnteredText(i.target.value);
    //console.log(i.target.value);
  };

  const submitHandler = (event) => {
    event.preventDefault();
    setSubmittedText(enteredText);
    setEnteredText("");
  };

  return (
    <div className="App">
      <h1>Get user input</h1>
      <form onSubmit={submitHandler}>
      <input
        placeholder="type something"
        type="text"
        value={enteredText}
        onChange={textChangeHandler}
      />
      <button type="submit" >
        Submit
      </button>
      </form>

      {submittedText && (<p>You just typed: {submittedText}</p>)}
    </div>
  );
}

---

Related Topics