Reusable Textbox component example in react js

• Create Components folder under src folder
• Create  common folder under Components folder
• Create Textbox folder under common folder
• Add index.js file under Textbox folder and add below Code

import React from "react";

import "./style.css";

const Textbox = props => {

  return (

    <input

      id={props.id}

      name={props.name}

      type={props.type}

      placeholder={props.placeholder}

      className={props.className}

      onChange={props.onChangeHandler}

      readOnly={props.isreadOnly}

      value={props.value}

    />

  );

};

Textbox.defaultProps = {

  type: "text",

  className: "txtStyle1",

  isreadOnly: false

};

export default Textbox;

• Add style.css file and add below Code

.txtStyle1 {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #ccc;

  border-radius: 4px;

  box-sizing: border-box;

}

.txtStyle2 {

  width: 100%;

  padding: 12px 20px;

  margin: 8px 0;

  display: inline-block;

  border: 1px solid #f00;

  border-radius: 4px;

  box-sizing: border-box;

}

• Go to Components Folder and Add TextboxEXP.js file and add below Code

import React, { useState } from "react";

import Textbox from "./common/Textbox/index";

const TextboxEXP = () => {

  const [txtName, settxtName] = useState("");

  const [txtEmail, settxtEmail] = useState("Default Data");

  const [txtPassword, settxtPassword] = useState("");

  return (

    <>

      <h3>Textbox reusable component example</h3>

      <Textbox

        id={"txtName"}

        name={"txtName"}

        type={"text"}

        placeholder={"Enter Name"}

        className={"txtStyle1"}

        isreadOnly={false}

        value={txtName}

        onChangeHandler={e => settxtName(e.target.value)}

      />

      <Textbox

        id={"txtEmail"}

        name={"txtEmail"}

        type={"text"}

        placeholder={"Enter Email"}

        className={"txtStyle1"}

        value={txtEmail}

        onChangeHandler={e => settxtEmail(e.target.value)}

      />

      <Textbox

        id={"txtPassword"}

        name={"txtPassword"}

        type={"password"}

        placeholder={"Enter Password"}

        className={"txtStyle2"}

        value={txtPassword}

        onChangeHandler={e => settxtPassword(e.target.value)}

      />

    </>

  );

};

export default TextboxEXP;

• Open App.js file and update code as below

import React from 'react';

import TextboxEXP from './Components/TextboxEXP'

function App() {

  return (

    <div>

      <TextboxEXP/>

    </div>

  );

}

export default App;

Output:

Textbox events in javascript

1. OnBlur – occurs when TextBox control loses focus;
2. OnChange – occurs when text in the TextBox control is changed;
3. OnFocus – occurs when TextBox control gain focus;
4. OnKeyDown – occurs when you press a keyboard key in the TextBox control;
5. OnKeyPressed – occurs when you press or hold down a keyboard key in the TextBox control;
6. OnKeyUp – occurs when you release the keyboard key pressed before in the TextBox control;
7. OnClick – occurs when you click on the TextBox control;

Setting focus to textbox control using JavaScript

   <script language="javascript">

        document.getElementById("TextboxControlName").focus();

    </script>

get value from a textbox in java script

 alert(document.getElementById('txtbox1').value);

Validate Money Currency format in ASP.Net TextBox using Validators

<asp:TextBox ID="txt_Amount" runat="server"></asp:TextBox>

    <asp:RegularExpressionValidator ID="RegularExpressionValidator10" runat="server"

        ControlToValidate="txt_Amount" ErrorMessage="Please enter only numbers like 1000 or 1000.00"

        ValidationExpression="^\d+(\.\d\d)?$"></asp:RegularExpressionValidator>

File Creation with textboxes in C#.net

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Windows;

using System.Windows.Controls;

using System.Windows.Data;

using System.Windows.Documents;

using System.Windows.Input;

using System.Windows.Media;

using System.Windows.Media.Imaging;

using System.Windows.Shapes;

using System.IO;

namespace WpfApplication1

{

    /// <summary>

    /// Interaction logic for Window2.xaml

    /// </summary>

    public partial class Window2 : Window

    {

        public Window2()

        {

            InitializeComponent();

        }

        StreamWriter sw;

        private void button1_Click(object sender, RoutedEventArgse)

        {

            sw = File.CreateText(@"E:\" + txtname.Text + ".txt");

            sw.WriteLine("\t\t\tCurriculam vitae");

            sw.WriteLine("Name\t:" + txtname.Text);

            sw.WriteLine("Email\t:" + txtemail.Text);

            sw.Close();

            System.Diagnostics.Process.Start("notepad.exe",@"E:\" + txtname.Text + ".txt");

        }

    }

}