CODEWITHSUNDEEP
jqueryhtmlcss
Ortal Blumenfeld Lagziel
Ortal Blumenfeld Lagziel

Reputation: 2555

CSS Disable the selection of input control content

I want to disallow user from select a content of input control by css. Im trying to add the following attributes to the control: 

 #editContainer
  {    
     user-select: none
    -webkit-user-select: none
    -khtml-user-select: none
    -moz-user-select: none
  }

<div id='editContainer'>
    <input id='daysInput' />
     <span id='daysString'></span>
     <input id='hoursInput' />
     <span>:</span>
     <input id='minuteInput' />
</div>

but it is not working...

how can i prevent from users to select content of controls?

Upvotes: 0

Views: 119

Answers (3)

Ortal Blumenfeld Lagziel
Ortal Blumenfeld Lagziel

Reputation: 2555

You need to add the following:

-moz-user-select: none; 
-webkit-user-select: none; 
-ms-user-select:none;
 user-select:none;' 
 unselectable='on'  
onselectstart='return false;'  
onmousedown='return false;'

For example:

<input  style='-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;'  unselectable='on'  onselectstart='return false;'  onmousedown='return false;' id='daysInput' />

Upvotes: 1

Max
Max

Reputation: 1131

I do not think you'll find a good solution for this.

The only (JavaScript) way I see, is to use several elements and position absolute. The top element (div or any other you like) should have the same size if input. This element can prevent selection.

In the case you need input some data to input field, you temporary hide this element and back when input finished.

Upvotes: 0

you-rick
you-rick

Reputation: 185

You can't do this with text input fields, if they are focused (i.e. opened for editing)

It will work only with attr. disabled="disabled"

<div id='editContainer'>
    <input id='daysInput' disabled="disabled" value="Test"/>
     <span id='daysString'></span>
     <input id='hoursInput'  disabled="disabled" value="Test"/>
     <span>:</span>
     <input id='minuteInput'  disabled="disabled" value="Test"/>
</div>

Check out this example http://jsfiddle.net/ce7st2ms/7/

Upvotes: 0

Related Questions