Steps to Create an HTML Text Box that cannot be clicked

Question

Steps to Create an HTML Text Box that cannot be clicked

Does anyone know of a way to prevent a text box from being clicked without disabling it or blocking mouse hover events?

I can't disable the text box because that would interfere with my jQuery tool tips, and blocking mouse hover events is not an option either. I haven't found a solution that addresses both issues.

Just to clarify, the user shouldn't be able to select text in the box or place the typing pointer inside it. Using labels won't work because this needs to apply to password fields as well as regular text fields.

javascript html css

Answer 1

Answer №1

Here's a simple solution:

$('#textbox').on('focus', function() {
    $(this).blur();
});

Check out this JSFiddle

Answer 2

Here's a simple solution:

$('#textbox').on('focus', function() {
    $(this).blur();
});

Check out this JSFiddle

Answer 3

Answer №2

It's possible I may not fully grasp the query, but this solution appears viable.

<input id="notselectable" value="hello there"></input>
<script>
  document.getElementById('notselectable').addEventListener('focus', function()
  {
    document.getElementById('notselectable').blur();
  });
  document.getElementById('notselectable').style.cursor = 'default';
</script>

Answer 4

It's possible I may not fully grasp the query, but this solution appears viable.

<input id="notselectable" value="hello there"></input>
<script>
  document.getElementById('notselectable').addEventListener('focus', function()
  {
    document.getElementById('notselectable').blur();
  });
  document.getElementById('notselectable').style.cursor = 'default';
</script>

Steps to Create an HTML Text Box that cannot be clicked

Answer №1

Answer №2

Similar questions

What advantages and disadvantages come with using timeouts versus using countdowns in conjunction with an asynchronous content loading call in JavaScript/jQuery?

Updating a table without the need for a button in PHP and AJAX with an Excel-inspired approach

Utilize Javascript to establish a fresh attribute by analyzing other attributes contained in an array within the object

Disable sessionStorage property when closing tabs on all pages

Elements that are hidden or not displayed are still able to receive mouse over events

Having trouble setting margin-bottom to 0 in react and antd - why won't it reset?

The addition operator cannot be used with the Number type and the value of 1

The PointCloud vertices in Three.js consistently provide a position of (0,0,0)

Transform Typescript into compiled css files without using any additional tools

Utilizing multiple address parameters within a single-page application

What is the most effective way to utilize zoom with an Orthographic projection?

This error message in AngularJS indicates that the argument 'fn' is not being recognized as a function

Is there a way to expand the navbar to full width?

problems encountered when trying to deploy a backend api on the Render platform

Another project cannot import the library that was constructed

Transfer the data from a post request through routes following the MVC pattern

Arrange flex list items in vertical rows on smaller screens for a more organized layout

Failed installation of Semantic-ui through npm encountered

Error in Node.js: Unable to access properties of null value within Express

Unable to apply margin right to React Material-UI table