Skip to content

Commit

Permalink
Trigger proper keyboard when textboxes are numbers only (#513)
Browse files Browse the repository at this point in the history 
* Trigger proper keyboard when textboxes are numbers only

* Minor semantic touchups

* Tweak to doc text
  • Loading branch information
@jegelstaff
jegelstaff authored Jun 26, 2024
1 parent 1adf74b commit e5d8156
Show file tree
Hide file tree
Showing 4 changed files with 61 additions and 7 deletions.
7 changes: 5 additions & 2 deletions class/xoopsform/formtext.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,10 +45,13 @@ class XoopsFormText extends icms_form_elements_Text
* @param int $size Size
* @param int $maxlength Maximum length of text
* @param string $value Initial text
* @param bool $autocomplete Whether to use autocomplete functionality in browser. Seems to have no effect in render method.
* @param mixed $number Whether to treat it as a number when rendering (essentially boolean, but could be 1/0)
*/
function __construct($caption, $name, $size, $maxlength, $value = '', $autocomplete = false)
function __construct($caption, $name, $size, $maxlength, $value = '', $autocomplete = false, $number = false)
{
parent::__construct($caption, $name, $size, $maxlength, $value, $autocomplete);
parent::__construct($caption, $name, $size, $maxlength, $value, $autocomplete, $number);
$this->_deprecated = icms_core_Debug::setDeprecated('icms_form_elements_Text', sprintf(_CORE_REMOVE_IN_VERSION, '1.4'));
}
}
Expand Down
25 changes: 22 additions & 3 deletions libraries/icms/form/elements/Text.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,12 @@ class icms_form_elements_Text extends icms_form_Element {
*/
public $autocomplete = false;

/**
* Treat it as a number or text field when rendering.
* @var boolean
*/
public $numberOrText = false;

/**
* Constructor
*
Expand All @@ -53,14 +59,17 @@ class icms_form_elements_Text extends icms_form_Element {
* @param int $size Size
* @param int $maxlength Maximum length of text
* @param string $value Initial text
* @param bool $autocomplete Whether to use autocomplete functionality in browser. Seems to have no effect in render method.
* @param mixed $number Whether to treat it as a number-only box (essentially a boolean, but 1/0 might be passed in)
*/
public function __construct($caption, $name, $size, $maxlength, $value = '', $autocomplete = false) {
public function __construct($caption, $name, $size, $maxlength, $value = '', $autocomplete = false, $number = false) {
$this->setCaption($caption);
$this->setName($name);
$this->_size = (int) $size;
$this->_maxlength = (int) $maxlength;
$this->setValue($value);
$this->autoComplete = !empty($autocomplete);
$this->autocomplete = !empty($autocomplete);
$this->numberOrText = ($number ? 'number' : 'text');
}

/**
Expand All @@ -81,6 +90,15 @@ public function getMaxlength() {
return $this->_maxlength;
}

/**
* Get numbers or text
*
* @return int
*/
public function getNumberOrText() {
return $this->numberOrText;
}

/**
* Get initial content
*
Expand All @@ -106,7 +124,8 @@ public function setValue($value) {
* @return string HTML
*/
public function render() {
return "<input type='text' name='" . $this->getName()
$numberOrText = $this->getNumberOrText();
return "<input type='$numberOrText' name='" . $this->getName()
. "' id='" . $this->getName()
. "' size='" . $this->getSize()
. "' maxlength='" . $this->getMaxlength()
Expand Down
4 changes: 3 additions & 1 deletion modules/formulize/class/elementrenderer.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,9 @@ function constructElement($renderedElementMarkupName, $ele_value, $entry_id, $is
$renderedElementMarkupName,
$ele_value[0], // box width
$ele_value[1], // max width
$ele_value[2] // default value
$ele_value[2], // default value
false, // autocomplete in browser
$ele_value[3] // numbers only
);
} else { // nmc 2007.03.24 - added
$form_ele = new XoopsFormLabel ($ele_caption, formulize_numberFormat($ele_value[2], $this->_ele->getVar('ele_handle')), $renderedElementMarkupName); // nmc 2007.03.24 - added
Expand Down
32 changes: 31 additions & 1 deletion themes/Anari/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -969,6 +969,7 @@ table.formulize-subform-table {

table.formulize-subform-table input[type=text],
table.formulize-subform-table input[type=range],
table.formulize-subform-table input[type=number],
table.formulize-subform-table textarea {
min-width: 200px;
max-width: 200px;
Expand All @@ -988,7 +989,8 @@ div.subform_button_controls input[type="button"],

}

div.subform_button_controls input[type="text"] {
div.subform_button_controls input[type="text"],
div.subform_button_controls input[type="number"] {
margin-left: 1em;
width: 2em;
}
Expand Down Expand Up @@ -1183,15 +1185,18 @@ table.formulize-subform-table td {

.form-input,
table.outer input[type="text"],
table.outer input[type="number"],
table.outer input[type="date"],
table.outer input[type="password"],
table.outer textarea,
.form-container textarea,
.form-container input[type="text"],
.form-container input[type="number"],
.form-container input[type="date"],
.form-container input[type="password"],
#formulize_modal textarea,
#formulize_modal input[type="text"],
#formulize_modal input[type="number"],
#formulize_modal input[type="date"],
#formulize_modal input[type="password"] {
border-radius: 0;
Expand All @@ -1214,15 +1219,18 @@ table.outer textarea,
@media (min-width: 768px) {
.form-input,
table.outer input[type="text"],
table.outer input[type="number"],
table.outer input[type="date"],
table.outer input[type="password"],
table.outer textarea,
.form-container textarea,
.form-container input[type="text"],
.form-container input[type="number"],
.form-container input[type="date"],
.form-container input[type="password"],
#formulize_modal textarea,
#formulize_modal input[type="text"],
#formulize_modal input[type="number"],
#formulize_modal input[type="date"],
#formulize_modal input[type="password"],
.form-help-text,
Expand All @@ -1240,46 +1248,55 @@ table.outer textarea,
@media print {
.form-input,
table.outer input[type="text"],
table.outer input[type="number"],
table.outer input[type="date"],
table.outer input[type="password"],
table.outer textarea,
.form-container textarea,
.form-container input[type="text"],
.form-container input[type="number"],
.form-container input[type="date"],
.form-container input[type="password"],
#formulize_modal textarea,
#formulize_modal input[type="text"],
#formulize_modal input[type="number"],
#formulize_modal input[type="date"],
#formulize_modal input[type="password"] {
font-size: inherit;
}
}
.form-input::placeholder,
table.outer input[type="text"]::placeholder,
table.outer input[type="number"]::placeholder,
table.outer input[type="date"]::placeholder,
table.outer input[type="password"]::placeholder,
table.outer textarea::placeholder,
.form-container textarea::placeholder,
.form-container input[type="text"]::placeholder,
.form-container input[type="number"]::placeholder,
.form-container input[type="date"]::placeholder,
.form-container input[type="password"]::placeholder,
#formulize_modal textarea::placeholder,
#formulize_modal input[type="text"]::placeholder,
#formulize_modal input[type="number"]::placeholder,
#formulize_modal input[type="date"]::placeholder,
#formulize_modal input[type="password"]::placeholder {
color: var(--light-border-color);
}
.form-input:focus,
table.outer input[type="text"]:focus,
table.outer input[type="number"]:focus,
table.outer input[type="date"]:focus,
table.outer input[type="password"]:focus,
table.outer textarea:focus,
.form-container textarea:focus,
.form-container input[type="text"]:focus,
.form-container input[type="number"]:focus,
.form-container input[type="date"]:focus,
.form-container input[type="password"]:focus,
#formulize_modal textarea:focus,
#formulize_modal input[type="text"]:focus,
#formulize_modal input[type="number"]:focus,
#formulize_modal input[type="date"]:focus,
#formulize_modal input[type="password"]:focus {
outline: 0;
Expand All @@ -1288,59 +1305,71 @@ table.outer textarea:focus,

.form-input[readonly], .form-input[disabled],
table.outer input[type="text"][readonly],
table.outer input[type="number"][readonly],
table.outer input[type="date"][readonly],
table.outer input[type="password"][readonly],
table.outer textarea[readonly],
.form-container textarea[readonly],
.form-container input[type="text"][readonly],
.form-container input[type="number"][readonly],
.form-container input[type="date"][readonly],
.form-container input[type="password"][readonly],
#formulize_modal textarea[readonly],
#formulize_modal input[type="text"][readonly],
#formulize_modal input[type="number"][readonly],
#formulize_modal input[type="date"][readonly],
#formulize_modal input[type="password"][readonly],
table.outer input[type="text"][disabled],
table.outer input[type="number"][disabled],
table.outer input[type="date"][disabled],
table.outer input[type="password"][disabled],
table.outer textarea[disabled],
.form-container textarea[disabled],
.form-container input[type="text"][disabled],
.form-container input[type="number"][disabled],
.form-container input[type="date"][disabled],
.form-container input[type="password"][disabled],
#formulize_modal textarea[disabled],
#formulize_modal input[type="text"][disabled],
#formulize_modal input[type="number"][disabled],
#formulize_modal input[type="date"][disabled],
#formulize_modal input[type="password"][disabled] {
border-color: transparent;
}

.form-input[disabled],
table.outer input[type="text"][disabled],
table.outer input[type="number"][disabled],
table.outer input[type="date"][disabled],
table.outer input[type="password"][disabled],
table.outer textarea[disabled],
.form-container textarea[disabled],
.form-container input[type="text"][disabled],
.form-container input[type="number"][disabled],
.form-container input[type="date"][disabled],
.form-container input[type="password"][disabled],
#formulize_modal textarea[disabled],
#formulize_modal input[type="text"][disabled],
#formulize_modal input[type="number"][disabled],
#formulize_modal input[type="date"][disabled],
#formulize_modal input[type="password"][disabled] {
color: #818E9B;
}
@media print {
.form-input[disabled],
table.outer input[type="text"][disabled],
table.outer input[type="number"][disabled],
table.outer input[type="date"][disabled],
table.outer input[type="password"][disabled],
table.outer textarea[disabled],
.form-container textarea[disabled],
.form-container input[type="text"][disabled],
.form-container input[type="number"][disabled],
.form-container input[type="date"][disabled],
.form-container input[type="password"][disabled],
#formulize_modal textarea[disabled],
#formulize_modal input[type="text"][disabled],
#formulize_modal input[type="number"][disabled],
#formulize_modal input[type="date"][disabled],
#formulize_modal input[type="password"][disabled]{
background: #fff;
Expand Down Expand Up @@ -1456,6 +1485,7 @@ div.formulize_autocomplete {
.form-container .col2 select,
#formulize_modal .col2 select,
.col2 input[type="text"],
.col2 input[type="number"],
.col2 textarea {
min-width: 700px;
}
Expand Down

0 comments on commit e5d8156

Please sign in to comment.