How to restrict user ,not to input value from keyboard into textbox?

Question

User-367318540 posted

i am trying to restrict user, that not to input value from keyboard into textbox,just barcode scanner allowed and not to copy paste.

Below code i tried ,but it is not working.

 <script type="text/javascript">
    let inputStart, inputStop;

$("#TextBox1")[0].onpaste = e => e.preventDefault();
// handle a key value being entered by either keyboard or scanner
var lastInput

let checkValidity = () => {
	if ($("#TextBox1").val().length < 10) {
  	  $("#TextBox1").val('')
  } else {
    $("body").append($('<div style="background:green;padding: 5px 12px;margin-bottom:10px;" id="msg">ok</div>'))
  }
  timeout = false
}

let timeout = false
$("#TextBox1").keypress(function (e) {
  if (performance.now() - lastInput > 1000) {
  	$("#TextBox1").val('')
  }
	lastInput = performance.now();
	if (!timeout) {
  	timeout = setTimeout(checkValidity, 200)
  }
});
</script>

            <asp:TextBox ID="TextBox1" AutoPostBack="true" runat="server"  Placeholder="Input Bale No" autocomplete="off"    OnTextChanged="TextBox1_TextChanged" Height="30px" Width="208px" style="margin-left: 0px"></asp:TextBox>

Answer 1

User475983607 posted

Hide the textbox using CSS.

<div style="display:none;">
    <asp:TextBox ID="TextBox1" runat="server" Text="Hello World"></asp:TextBox>
</div>

Answer 2

User1535942433 posted

Hi akhterr,

Accroding to your description,if you need to restrict the textbox,you could use readonly.

<asp:TextBox ID="TextBox1" AutoPostBack="true" runat="server"  Placeholder="Input Bale No" autocomplete="off" OnTextChanged="TextBox1_TextChanged" Height="30px" Width="208px" style="margin-left: 0px" ReadOnly="true"></asp:TextBox>

Best regards,

Yijing Sun

Answer 3

User-367318540 posted

Hi mgebhard,

i do not want to hide textbox ,i want input just from barcode scanner ,not from keyboard or (copy /paste).i share above CSS,which will take input within second and not allowing take input from keyboard.

But that CSS code is not working.

You may check code below link

http://jsfiddle.net/uyzsb3o0/8/

Answer 4

User-367318540 posted

Hi yij Sun,

 if i do readonly to textbox ,then not able to take input from barcode scanner.

please check below link ,i want to integrate it ,in asp.net 

http://jsfiddle.net/uyzsb3o0/8/

Answer 5

User1535942433 posted

Hi akhterr,

Accroding to your description,I have some doubts about barcode scanner.

How do you fill the value of barcode scanner to the textbox? Do you have a scanner or it could copy the barcode into the textbox and restrict user.

There are two ways:

1.scanners "paste" the values in to the focused control.  In this way,you don't use onpaste() method.

2.use key triage. You could add readonly when the user enter the value.And if it is the barcode,it remove the readonly.

Note:When you use autopostback true,if the user enter the value,it will postback and clear. So,you need to use autopostback false and write postback using jquery.

https://stackoverflow.com/questions/16296342/scan-barcode-into-a-specific-textbox

Best regards,

Yijing Sun

Answer 6

User-367318540 posted

Can you provide me example.

Answer 7

User475983607 posted

Hi mgebhard,

i do not want to hide textbox ,i want input just from barcode scanner ,not from keyboard or (copy /paste).i share above CSS,which will take input within second and not allowing take input from keyboard.

But that CSS code is not working.

You may check code below link

http://jsfiddle.net/uyzsb3o0/8/

I tested the CSS approach and it works as expected.  The sample code you provided does not contain CSS so I'm not sure what you're talking about. 

The code you're shared is incomplete.  I suspect you copied the code and do not understand how it works.  

Answer 8

User-367318540 posted

Yes,i just did for make you understanding.

Answer 9

User1535942433 posted

Hi akhterr,

So could you tell us how do you fill the value of barcode scanner to the textbox? Do you have a scanner or it could copy the barcode into the textbox and restrict user? 

Could you post your codes to us? It will help us to solve your problems.

Best regards,

Yijing Sun

Answer 10

User-367318540 posted

Below is code ,and Barcode Scanner Device read barcode from Sticker and take that value into textbox.no code for that,

 <script type="text/javascript">
    let inputStart, inputStop;

$("#TextBox1")[0].onpaste = e => e.preventDefault();
// handle a key value being entered by either keyboard or scanner
var lastInput

let checkValidity = () => {
	if ($("#TextBox1").val().length < 10) {
  	  $("#TextBox1").val('')
  } else {
    $("body").append($('<div style="background:green;padding: 5px 12px;margin-bottom:10px;" id="msg">ok</div>'))
  }
  timeout = false
}

let timeout = false
$("#TextBox1").keypress(function (e) {
  if (performance.now() - lastInput > 1000) {
  	$("#TextBox1").val('')
  }
	lastInput = performance.now();
	if (!timeout) {
  	timeout = setTimeout(checkValidity, 200)
  }
});
</script>

            <asp:TextBox ID="TextBox1" AutoPostBack="true" runat="server"  Placeholder="Input Bale No" autocomplete="off"    OnTextChanged="TextBox1_TextChanged" Height="30px" Width="208px" style="margin-left: 0px"></asp:TextBox>